Google API V3 多个信息窗口加上点击关闭答案

【问题标题】：Google API V3 multiple infowindows plus close on clickGoogle API V3 多个信息窗口加上点击关闭
【发布时间】：2012-09-16 01:05:36
【问题描述】：

我想出了如何在信息窗口中使用多个标记，但是当您单击另一个标记时它们不会关闭，我相信这是因为我正在为每个标记创建一个新的信息窗口，任何帮助将不胜感激。

    <script type="text/javascript">


var map ;
  function initialize() {
    var latlng = new google.maps.LatLng(53.063165, -3.205390);
    var myOptions = {
      zoom: 6,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.SATELLITE,
      zoomControl: false,
      mapTypeControl: false,
      mapTypeControlOptions: {
          style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
          position: google.maps.ControlPosition.LEFT_CENTER
      },
panControl: false,
streetViewControl: false,
      streetViewControlOptions: {
          position: google.maps.ControlPosition.LEFT_CENTER
      }
};
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var marker = add_marker(56.747923,-3.717155,"Ben Vrackie","<b>Ben Vrackie</b><br><br>Perthshire classic! some sweet hidden gems on this loop.<br> surrounded by amazing countryside, Lochs, hills this<br>has it all... Red Grade."); // pass in as Latitude, then Longitude
    marker.setMap(map);

   var marker = add_marker(57.556366,-5.409222,"Torridon Forest","<b>Torridon Forest</b><br><br>Technical and breathtaking.... <br>Black/red grade."); // pass in as Latitude, then Longitude
    marker.setMap(map)
}


  function add_marker(lat,lng,title,box_html) {

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

    var marker = new google.maps.Marker({
          position: new google.maps.LatLng(lat,lng),
          map: map,
          title: title
    });


    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
});
return marker;
  }



 </script>

【问题讨论】：

标签： api google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

只创建一个全局 InfoWindow 对象。

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

然后

    function add_marker(lat,lng,title,box_html) {

        var marker = new google.maps.Marker({
              position: new google.maps.LatLng(lat,lng),
              map: map,
              title: title
        });

  google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(box_html);

        infowindow.open(map,marker);
    });
    return marker;
  }

【讨论】：

为我工作谢谢！

【解决方案2】：

更改您的 add_marker 函数以使用单个全局信息窗口。一种方式：

var infowindow = null;
function add_marker(lat,lng,title,box_html) {

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

  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat,lng),
      map: map,
      title: title
  });

  google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(box_html);
      infowindow.open(map,marker);
  });
  return marker;
}

在这个example in the "Demo Gallery"中也有描述

【讨论】：