如何添加带有多个标记的Google地图在加载和点击时显示Infowindows

更新时间：2023-08-30 10:25:52

你需要函数闭包（IIFE）您的infowindow变量：

//点击地图 google.maps关闭信息窗口的事件。 event.addListener（map，'click'，（function（infowindow））{ return function（）{ infowindow.close（）; }}）（infowindow））;

概念证明小提琴

代码段：

I am trying to add Google Maps with multiple markers. All markers have info windows. I want to show all infowindows to show by default on page load. When someone clicks on map or on a marker, all infowindows must close and then show by clicking on the markers.

Here is how I am trying to achieve it:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
html {
    height: 100%
}

body {
    height: 100%;
    margin: 0;
    padding: 0
}

#map {
    height: 100%
}
</style>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
var locations = [
    ['loan 1', 33.890542, 151.274856, 'address 1'],
    ['loan 2', 33.923036, 151.259052, 'address 2'],
    ['loan 3', 34.028249, 151.157507, 'address 3'],
    ['loan 4', 33.80010128657071, 151.28747820854187, 'address 4'],
    ['loan 5', 33.950198, 151.259302, 'address 5']
];
    
function initMap() {
    var latlng = new google.maps.LatLng(locations[0][1], locations[0][2]);
    mapOptions = {
        zoom:               8,
        center:             latlng
    }
    var map = new google.maps.Map(document.getElementById('map'), mapOptions);

    var infowindow = new google.maps.InfoWindow();

    for (i = 0; i < locations.length; i++) {
        var icon = '';
        if ( locations[i][0].length != '' && locations[i][1].length != '' ) {

            var marker = new google.maps.Marker({
                position:       new google.maps.LatLng(locations[i][1], locations[i][2]),
                map:            map,
                title:          locations[i][3],
            });
            
            var contentString = 'Title on Load';
            var infowindow = new google.maps.InfoWindow({
                content:    contentString,
                maxWidth:   160
            });
            infowindow.open(map, marker);

            // Event that closes the Info Window with a click on the map
            google.maps.event.addListener(map, 'click', function() {
                infowindow.close();
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    var contentString = 'Title on Click';
                    infowindow.setContent(contentString);
                    infowindow.open(map, marker);
                }
            })(marker, i));
        }
    }
}
google.maps.event.addDomListener(window, 'load', initMap);

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

The code above works fine but it shows duplicate infowindows. On click the infowindows that open on load must close but they are not closing.

You need function closure (an IIFE) on your infowindow variable:

// Event that closes the Info Window with a click on the map
google.maps.event.addListener(map, 'click', (function(infowindow) {
  return function() {
    infowindow.close();
}})(infowindow));

proof of concept fiddle

code snippet:

var locations = [
  ['loan 1', 33.890542, 151.274856, 'address 1'],
  ['loan 2', 33.923036, 151.259052, 'address 2'],
  ['loan 3', 34.028249, 151.157507, 'address 3'],
  ['loan 4', 33.80010128657071, 151.28747820854187, 'address 4'],
  ['loan 5', 33.950198, 151.259302, 'address 5']
];

function initMap() {
  var latlng = new google.maps.LatLng(locations[0][1], locations[0][2]);
  mapOptions = {
    zoom: 8,
    center: latlng
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);

  var infowindow = new google.maps.InfoWindow();

  for (i = 0; i < locations.length; i++) {
    var icon = '';
    if (locations[i][0].length != '' && locations[i][1].length != '') {

      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        title: locations[i][3],
      });

      var contentString = 'Title on Load';
      var infowindow = new google.maps.InfoWindow({
        content: contentString,
        maxWidth: 160
      });
      infowindow.open(map, marker);

      // Event that closes the Info Window with a click on the map
      google.maps.event.addListener(map, 'click', (function(infowindow) {
        return function() {
          infowindow.close();
        }
      })(infowindow));

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          // close all the other infowindows that opened on load
          google.maps.event.trigger(map, 'click')
          var contentString = 'Title on Click';
          infowindow.setContent(contentString);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  }
}
google.maps.event.addDomListener(window, 'load', initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

上一篇 : ：在图表中显示圆，并以图表单位C＃半径下一篇 : “无效标签" jQuery和Yahoo Geolocation API的parsererror

如何添加带有多个标记的Google地图在加载和点击时显示Infowindows

相关阅读

推荐文章