Question

我是谷歌地图的新手，我喜欢我在codepen上找到的这个设置，并希望将自己的项目建立在它上面但是改变了样式，但是它没有我想要的地址标记能够添加。我还希望我的标记是一个自定义的png文件。我可以理解地图是针对特定的lat和lng居中的，但我想保留一个中心值，并使用自定义标记添加两个或更多地址。我该怎么做呢？

var mapOptions = {
    zoom: 12,
    center: new google.maps.LatLng(27.946672,-82.482866),
    disableDefaultUI: true,
    styles: styleArray
    };

    var map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);
    }

    google.maps.event.addDomListener(window, 'load', initialize);

这是指向codepen项目的链接：

http://codepen.io/JonDCarey/pen/ncJoe

谢谢！

Answer 1

Marker API如下：

var marker = new google.maps.Marker({
      position: LatLng,
      map: map,
      title: 'Hello World!'
  });
});

查看更新后的CodePen：http://codepen.io/anon/pen/NPOzvZ

现在自定义PNG非常简单 - 只需更改标记图标，例如：

var marker = new google.maps.Marker({
     position: LatLng,
     map: map,
     title: 'Hello World!',
          icon: '<URL TO NEW ICON>'
     });
 });

以下是CodePen中的示例：http://codepen.io/anon/pen/dPgKZm

最后一个是地址转换 - 这有点复杂，但这是一个简单的例子：

var MarkerFromAddress = function(address) {
    geocoder= new google.maps.Geocoder();
    geocoder.geocode( { 'address': address}, function(results, status) {

      if (status == google.maps.GeocoderStatus.OK) {
        var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
        });

        // I also can center the map here:
        map.setCenter(results[0].geometry.location);
      }
    });
  };

  MarkerFromAddress("1600 Amphitheatre Parkway, Mountain View");

CodePen示例：http://codepen.io/anon/pen/XJxYZM

希望有所帮助

如何向以下Google地图添加自定义标记？

1 个答案: