下面是一个几乎完整的示例javascript函数，它允许在JSONObject中定义多个标记。

它将只显示在地图边界内的标记。

这很重要，这样你就不用做额外的工作了。

你也可以设置一个标记的限制，这样你就不会显示一个极端数量的标记(如果有可能在你的使用);

如果地图中心的变化不超过500米，就不会显示标记。 这很重要，因为如果用户单击标记并在此过程中意外地拖动了地图，您不希望地图重新加载标记。

我将这个函数附加到地图的空闲事件侦听器，因此标记只在地图空闲时显示，并在不同的事件后重新显示标记。

活动屏幕截图 在信息窗口中显示更多内容的屏幕截图有一个小变化。 粘贴自pastbin.com

<script src=“//pastebin.com/embed_js/uWAbRxfg”></script>

var arr = new Array();
    function initialize() { 
        var i;  
        var Locations = [
                {
                  lat:48.856614, 
                  lon:2.3522219000000177, 
                  address:'Paris',
                  gval:'25.5',
                  aType:'Non-Commodity',
                  title:'Paris',
                  descr:'Paris'           
                },        
                    {
                  lat: 55.7512419, 
                  lon: 37.6184217,
                  address:'Moscow',
                  gval:'11.5',
                  aType:'Non-Commodity',
                  title:'Moscow',
                  descr:'Moscow Airport'              
                },     

                {
              lat:-9.481553000000002, 
              lon:147.190242, 
              address:'Port Moresby',
              gval:'1',
              aType:'Oil',
              title:'Papua New Guinea',
              descr:'Papua New Guinea 123123123'              
            },
            {
           lat:20.5200,
           lon:77.7500,
           address:'Indore',
            gval:'1',
            aType:'Oil',
            title:'Indore, India',
            descr:'Airport India'
        }
    ];

    var myOptions = {
        zoom: 2,
        center: new google.maps.LatLng(51.9000,8.4731),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map"), myOptions);

    var infowindow =  new google.maps.InfoWindow({
        content: ''
    });

    for (i = 0; i < Locations.length; i++) {
            size=15;        
            var img=new google.maps.MarkerImage('marker.png',           
                new google.maps.Size(size, size),
                new google.maps.Point(0,0),
                new google.maps.Point(size/2, size/2)
           );

        var marker = new google.maps.Marker({
            map: map,
            title: Locations[i].title,
            position: new google.maps.LatLng(Locations[i].lat, Locations[i].lon),           
                icon: img
        });

        bindInfoWindow(marker, map, infowindow, "<p>" + Locations[i].descr + "</p>",Locations[i].title);  

    }

}

function bindInfoWindow(marker, map, infowindow, html, Ltitle) { 
    google.maps.event.addListener(marker, 'mouseover', function() {
            infowindow.setContent(html); 
            infowindow.open(map, marker); 

    });
    google.maps.event.addListener(marker, 'mouseout', function() {
        infowindow.close();

    }); 
} 

完整的工作示例。你可以复制，粘贴和使用。

根据Daniel Vassallo的回答，下面是一个以更简单的方式处理闭包问题的版本。

因为所有的标记都有一个单独的InfoWindow，而且JavaScript并不关心你是否给对象添加了额外的属性，你所需要做的就是给标记的属性添加一个InfoWindow，然后调用InfoWindow本身的.open() !

编辑:有了足够的数据，页面加载可能会花费很多时间，因此与其使用标记构造InfoWindow，不如只在需要时进行构造。注意，用于构造InfoWindow的任何数据都必须作为属性(data)追加到Marker。还要注意，在第一次单击事件之后，infoWindow将作为它的标记的属性持久化，因此浏览器不需要不断地重构。

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

var map = new google.maps.Map(document.getElementById('map'), {
  center: new google.maps.LatLng(-33.92, 151.25)
});

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    data: {
      name: locations[i][0]
    }
  });
  marker.addListener('click', function() {
    if(!this.infoWindow) {
      this.infoWindow = new google.maps.InfoWindow({
        content: this.data.name;
      });
    }
    this.infoWindow.open(map,this);
  })
}

我知道这个答案太迟了。但我希望这也能帮助到其他开发者。: -) 下面的代码将使用信息窗口在谷歌地图上添加多个标记。 这段代码可以用来在地图上绘制任意数量的标记。 请将您的谷歌映射API键放在此代码的正确位置。(我已将其标记为“您的API密钥”)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Google Map</title>
    <style>
        #map{
            height: 600px;
            width: 100%;
        }
    </style>
</head>
<body>

<h1>My Google Map`</h1>
<div id="map"></div>


    <script>
        function initMap(){
          //Map options
            var options = {
                zoom:9,
                center:{lat:42.3601, lng:-71.0589}
            }
            // new map
            var map = new google.maps.Map(document.getElementById('map'), options);
            // customer marker
            var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png';
            //array of Marrkeers
            var markers = [
              {
                coords:{lat: 42.4668, lng: -70.9495},img:iconBase,con:'<h3> This Is your Content <h3>'
              },
              {
                coords:{lat: 42.8584, lng: -70.9300},img:iconBase,con:'<h3> This Is your Content <h3>'
              },
              {
                coords:{lat: 42.7762, lng: -71.0773},img:iconBase,con:'<h3> This Is your Content <h3>'
              }
            ];

            //loopthrough markers
            for(var i = 0; i <markers.length; i++){
              //add markeers
              addMarker(markers[i]);
            }

            //function for the plotting markers on the map
            function addMarker (props){
              var marker = new google.maps.Marker({
                position: props.coords,
                map:map,
                icon:props.img
              });
              var infoWindow = new google.maps.InfoWindow({
                content:props.con,
              });
              marker.addListener("click", () => {
                infoWindow.open(map, marker);
              });
            }
        }
    </script>

    <script
      src="https://maps.googleapis.com/maps/api/js?key=**YourAPIKey**&callback=initMap"
      defer
    ></script>

</body>
</html>

这是我写的另一个版本来节省地图的空间，它将infowindow指针放在标记的实际纬度和长度上，而在显示infowindow时暂时隐藏标记。

它还取消了标准的“标记”分配，并加快了速度 通过直接将新标记分配给标记创建中的标记数组进行处理。但是请注意，标记和信息窗口都添加了额外的属性，所以这种方法有点不合常规……但那是我!

在这些信息窗口问题中从未提到，标准的信息窗口不是放在标记点的lat和lng上，而是放在标记图像的顶部。标记可见性必须隐藏，否则Maps API将再次将信息窗口锚推回标记图像的顶部。

对“标记”数组中的标记的引用在标记声明后立即创建，用于以后可能需要的任何额外处理任务(隐藏/显示，抓取坐标等)。这样就省去了将标记对象赋值给'marker'的额外步骤，然后将'marker'推到标记数组中…在我的书里有很多不必要的处理。

不管怎样，对信息窗口有不同的看法，希望它能帮助你了解和激励你。

    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];
    var map;
    var markers = [];

    function init(){
      map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 10,
        center: new google.maps.LatLng(-33.92, 151.25),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      var num_markers = locations.length;
      for (var i = 0; i < num_markers; i++) {  
        markers[i] = new google.maps.Marker({
          position: {lat:locations[i][1], lng:locations[i][2]},
          map: map,
          html: locations[i][0],
          id: i,
        });

        google.maps.event.addListener(markers[i], 'click', function(){
          var infowindow = new google.maps.InfoWindow({
            id: this.id,
            content:this.html,
            position:this.getPosition()
          });
          google.maps.event.addListenerOnce(infowindow, 'closeclick', function(){
            markers[this.id].setVisible(true);
          });
          this.setVisible(false);
          infowindow.open(map);
        });
      }
    }

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

这是一个工作的JSFiddle

额外的注意 您将注意到在给定的谷歌示例数据中，'locations'数组中的第四个位置是一个数字。在这个例子中，你也可以使用这个值作为标记id来代替当前循环的值，这样…

var num_markers = locations.length;
for (var i = 0; i < num_markers; i++) {  
  markers[i] = new google.maps.Marker({
    position: {lat:locations[i][1], lng:locations[i][2]},
    map: map,
    html: locations[i][0],
    id: locations[i][3],
  });
};

来源链接

演示链接

完整的HTML代码

在单击或悬停时显示InfoWindow。 只会显示一个InfoWindow

    <!DOCTYPE html>
    <html>

    <head>
        <style>
            /*  <span class="metadata-marker" style="display: none;" data-region_tag="css"></span>       Set the size of the div element that contains the map */
            #map {
                height: 400px;
                /* The height is 400 pixels */
                width: 100%;
                /* The width is the width of the web page */
            }
        </style>
        <script>
            var map;
            var InforObj = [];
            var centerCords = {
                lat: -25.344,
                lng: 131.036
            };
            var markersOnMap = [{
                    placeName: "Australia (Uluru)",
                    LatLng: [{
                        lat: -25.344,
                        lng: 131.036
                    }]
                },
                {
                    placeName: "Australia (Melbourne)",
                    LatLng: [{
                        lat: -37.852086,
                        lng: 504.985963
                    }]
                },
                {
                    placeName: "Australia (Canberra)",
                    LatLng: [{
                        lat: -35.299085,
                        lng: 509.109615
                    }]
                },
                {
                    placeName: "Australia (Gold Coast)",
                    LatLng: [{
                        lat: -28.013044,
                        lng: 513.425586
                    }]
                },
                {
                    placeName: "Australia (Perth)",
                    LatLng: [{
                        lat: -31.951994,
                        lng: 475.858081
                    }]
                }
            ];

            window.onload = function () {
                initMap();
            };

            function addMarkerInfo() {
                for (var i = 0; i < markersOnMap.length; i++) {
                    var contentString = '<div id="content"><h1>' + markersOnMap[i].placeName +
                        '</h1><p>Lorem ipsum dolor sit amet, vix mutat posse suscipit id, vel ea tantas omittam detraxit.</p></div>';

                    const marker = new google.maps.Marker({
                        position: markersOnMap[i].LatLng[0],
                        map: map
                    });

                    const infowindow = new google.maps.InfoWindow({
                        content: contentString,
                        maxWidth: 200
                    });

                    marker.addListener('click', function () {
                        closeOtherInfo();
                        infowindow.open(marker.get('map'), marker);
                        InforObj[0] = infowindow;
                    });
                    // marker.addListener('mouseover', function () {
                    //     closeOtherInfo();
                    //     infowindow.open(marker.get('map'), marker);
                    //     InforObj[0] = infowindow;
                    // });
                    // marker.addListener('mouseout', function () {
                    //     closeOtherInfo();
                    //     infowindow.close();
                    //     InforObj[0] = infowindow;
                    // });
                }
            }

            function closeOtherInfo() {
                if (InforObj.length > 0) {
                    /* detach the info-window from the marker ... undocumented in the API docs */
                    InforObj[0].set("marker", null);
                    /* and close it */
                    InforObj[0].close();
                    /* blank the array */
                    InforObj.length = 0;
                }
            }

            function initMap() {
                map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 4,
                    center: centerCords
                });
                addMarkerInfo();
            }
        </script>
    </head>

    <body>
        <h3>My Google Maps Demo</h3>
        <!--The div element for the map -->
        <div id="map"></div>

        <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

    </body>

    </html>