google-maps-api-3 - 各場所のカスタム Google マップ v3 マーカー

Question

開発中のマップがあります。基本的な Google RED DROPLET アイコンがマーカー イメージとして表示されます。独自のカスタム イメージを表示するにはどうすればよいですか? 約 50 個のマーカーすべての個別の画像があります (会社のロゴになります)。

誰か助けてくれませんか？ここにリンクがあります。

私が現在持っているコードを使用してカスタム マーカーを設定するためのヘルプは素晴らしいでしょう。

Answer 1

実際のコードから:

var image = './beachflag.png';
[...]
var marker=new google.maps.Marker({
  position: myPosition,
  map: map,
  icon: image
});

あなたのコード:

var point = new google.maps.LatLng(37.984798,-121.312094);
var marker = createMarker(point,'<div style="width:205px"><center><img src="images/sampleuopsign.jpg" /></center><h2>University of the Pacific</h2>3601 Pacific Avenue<br>Stockton, California 95211<br>209.946.2011<br><small>On the web visit: <a href="http://www.pacific.edu">www.Pacific.edu<\/a></small><\/div>');
var image = 'icons/orange_arrow.png'; // this will be gmarkers[0]

するべきこと：

var point = new google.maps.LatLng(37.984798,-121.312094);
var image = 'icons/orange_arrow.png'; // this will be gmarkers[0]
var marker = createMarker(point,'<div style="width:205px"><center><img src="images/sampleuopsign.jpg" /></center><h2>University of the Pacific</h2>3601 Pacific Avenue<br>Stockton, California 95211<br>209.946.2011<br><small>On the web visit: <a href="http://www.pacific.edu">www.Pacific.edu<\/a></small><\/div>', image);

CreateMarker を変更します。

function createMarker(latlng, html, img) {

// ここで、imgパラメータが追加されていることに注意してください

  var contentString = html;
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    ***icon: img,***
    zIndex: Math.round(latlng.lat()*-100000)<<5
  });
[...]

EDIT あなたのコードと私の改造を使った簡単なテスト。

Answer 2

画像を選択し、後でその画像を緯度と経度に関連付けることができます。この場合、マーカーを作成する関数が1つあります。

if(location.category=="TEAMNAME"){
    var image='img/blueMarker.png';
}
if(location.category=="TEAMNAME2"){
    var image='img/redMarker.png';
}
function displayLocation(location){
        var content = '<strong><p>Team: ' +location.category + '</strong>';
        var latLng = new google.maps.LatLng(parseFloat(location.latitud), parseFloat(location.longitud));
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            draggable: true,
            visible: true,
            title: location.category,
            icon: image
        });
        /*Content window asociated to created markers*/
        google.maps.event.addListener(marker, 'click', function(){
            infowindow.setContent(content);
            infowindow.open(map, marker);
        });
        return marker;
    }