每个位置的自定义Google Map v3标记

Question

我正在开发一张地图。基本的Google RED DROPLET图标显示为我的标记图像。如何才能获得自己的自定义图像？我有几乎所有50个标记的个人图像（将是公司的标识）。

有人可以帮忙吗？这是the link。

使用我目前的代码设置自定义标记的任何帮助都会很棒。

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
  });
[...]

修改 使用您的代码和我的mod进行快速测试。

Answer 2

您可以选择图像，然后将该图像与lat和long相关联，在这种情况下，有一个功能可以创建标记。

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;
    }