谷歌地图：将带有信息框的多个标记添加到自定义地图答案

【问题标题】：Google Maps: Add Multiple Markers with Info box to Custom map谷歌地图：将带有信息框的多个标记添加到自定义地图
【发布时间】：2013-12-18 22:32:18
【问题描述】：

嗨，我对这个话题很陌生，经过几个小时的尝试，我已经接近目标了，但我认为我需要一点点踢球。

到目前为止，我能够创建一个样式化的地图并在地图上放置 2 个标记。缩放和其他一些东西对我来说很清楚如何影响。

代码如下：

<html>
<head> 
<title> test map </title>

<style type="text/css">
        #map {
            width: 750px;
            height: 500px;
        }
</style>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASm3CwaK9qtcZEWYa-iQwHaGi3gcosAJc&sensor=false"></script>
<script type="text/javascript"> 
    google.maps.event.addDomListener(window, 'load', init);

    function init()
    {

    var mapOptions = {
        zoom: 2,
        panControl: true,
        zoomControl: true,
        center: new google.maps.LatLng(33.524385, -112.048899),
        // 
        styles: [
        {
            "featureType": "water",
            "elementType": "geometry",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 17}]}, {
            "featureType": "landscape",
            "elementType": "geometry",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 20}]}, {
            "featureType": "road.highway",
            "elementType": "geometry.fill",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 17}]}, {
            "featureType": "road.highway",
            "elementType": "geometry.stroke",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 29}, {
                "weight": 0.2}]}, {
            "featureType": "road.arterial",
            "elementType": "geometry",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 18}]}, {
            "featureType": "road.local",
            "elementType": "geometry",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 16}]}, {
            "featureType": "poi",
            "elementType": "geometry",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 21}]}, {
            "elementType": "labels.text.stroke",
            "stylers": [
            {
                "visibility": "on"}, {
                "color": "#000000"}, {
                "lightness": 16}]}, {
            "elementType": "labels.text.fill",
            "stylers": [
            {
                "saturation": 36}, {
                "color": "#000000"}, {
                "lightness": 40}]}, {
            "elementType": "labels.icon",
            "stylers": [
            {
                "visibility": "off"}]}, {
            "featureType": "transit",
            "elementType": "geometry",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 19}]}, {
            "featureType": "administrative",
            "elementType": "geometry.fill",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 20}]}, {
            "featureType": "administrative",
            "elementType": "geometry.stroke",
            "stylers": [
            {
                "color": "#000000"}, {
                "lightness": 17}, {
                "weight": 1.2}]}]
    };

    var mapElement = document.getElementById('map');

    var myMap = new google.maps.Map(mapElement, mapOptions);


    var pos = new google.maps.LatLng(33.524385, -12.048899);
    var poi_marker = new google.maps.Marker(
    {
        map: myMap,
        draggable: false,
        animation: google.maps.Animation.DROP,
        position: pos
    });

    var pos = new google.maps.LatLng(5.524385, -12.048899);
    var poi_marker = new google.maps.Marker(
    {
        map: myMap,
        draggable: false,
        animation: google.maps.Animation.DROP,
        position: pos



    });

} 
</script>
</head> 
<body>

<div id="map"> </div>
</body>
</html>

什么对我有用。我看到我喜欢的风格加上经典标记的 2 个位置。

上面的代码映射Sample

然后我环顾四周，发现您可以使用带有标记的信息框。我想为我创建的每个标记将 HTLM 添加到这些框中。

谷歌代表。给出了这个对我来说很好的例子：

https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple-max?hl=en

我想像在 2 个简单的标记位置上那样将其中的几个添加到我的地图中，但老实说，我不知道在哪里放置我在上面链接中看到的代码。

在过去的 2 小时里尝试了各种方法，现在吃饱了。我做错了，因为这应该可行。

如果有人知道的话，糖果上的樱桃会在哪里放置代码以赋予标记我自己的风格。我已经找到了一些例子。所以我会很酷地一直定制它。

感谢您的帮助、想法或您贡献的任何东西！

【问题讨论】：

Google Maps JS API v3 - Simple Multiple Marker Example的可能重复
你好地理编码压缩包。我已经看到您提到的帖子可能是重复的，这对我更好地理解有关标记的主题很有帮助，但它并没有说明谈论使用这些信息框标记向地图添加某些样式。这真的是我的问题。如您所见，我可以在其中构建带有信息框和 html 的地图，但不能在组合中给它我想要的黑色样式。
地图样式与标记是分开的。您可以在样式地图中使用多标记代码。
你有任何链接，我可以找到如何操作。我需要将所有内容放在一个 html 文档中。

标签： javascript google-maps-api-3 infobox

【解决方案1】：

您希望信息框在您单击标记时传播吗？为此，您需要设置一个侦听器来侦听要单击的每个绘制的标记，然后在完成后生成一个信息框。

function infoBoxCreator() {

  var raInfoBoxElement = document.createElement('div');

  var infoBoxInfo = document.createElement('div');
  infoBoxInfo.className = 'infobox_content';
  infoBoxInfo.innerHTML = 'Text In My Infobox';

  raInfoBoxElement.appendChild(raNameElement);

  var infoBoxText = raInfoBoxElement;

  plotMarker(infoBoxText);
}


function plotMarker(infoBoxText) {

  var coordinate = new google.maps.LatLng(someLAT, someLONG);
  var infowindow = new google.maps.InfoWindow();

// Create the marker
  var marker = new google.maps.Marker({
    map: map,
    position: coordinate
  });

// Create Info window and destroy any other open infowindows
google.maps.event.addListener(marker, "click", function() {
    if (infowindow)
        infowindow.close();
    infowindow = new google.maps.InfoWindow({content: infoBoxText});
    infowindow.open(map, marker);
});

编辑：标记样式是指自定义图标吗？在google.maps.Marker 中输入icon: new google.maps.MarkerImage(FILEPATH)，然后输入您想用作自定义标记的图像的文件路径。

编辑 2： 还是一大早。我忘记了var infowindow = new google.maps.InfoWindow();我已经加进去了。

编辑 3：在信息框已经工作的地图中，只需让您的 mapOptions 看起来像这样：

var mapOptions = {
    center: new google.maps.LatLng(37.276087947677254, -12.048898999999995),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]}],
    streetViewControl: false
};

这对我有用。

【讨论】：

嘿，马修，非常感谢您给出答案。我会试一试，看看我能走多远。完成所有操作后，我将与您分享结果和代码，以供您在需要时提供帮助。不用担心清晨 ;-) 有时它就是这样。