单击时关闭所有其他InfoWindows [英] Close all other InfoWindows when one is clicked

问题描述

我试图修改下面的代码，以便所有其他infoWindows在单击时关闭，所以只有一个是一次打开的。除了用户最多可以打开20个infoWindows之外，目前所有的工作都很棒。

 函数infoWindow（标记，地图，标题，地址，网址）{
 google.maps .event.addListener（marker，'click'，function（）{
 var html =< div>< h3>+ title +< / h3>< p>< a href = '+ url +'>阅读更多内容< / a>< / p>< / div>; 
 iw = new google.maps.InfoWindow（{
 content：html，
 maxWidth：350 
}）; 
 iw.open（map，marker）; 
}）; 
 
  

解决方案

如果你只想要一个InfoWindow ，只需创建一个，然后在点击事件中的标记之间移动即可。

更新后的代码：

  // global infowindow 
 var iw = new google.maps.InfoWindow（{
 maxWidth：350 
}）; 
 
函数infoWindow（marker，map，title，address，url）{
 google.maps.event.addListener（marker，'click'，function（）{
 var html =< div>< h3>+ title +< / h3>< p>< a href ='+ url +'>阅读更多内容< / a>< / p>< ; / div>; 
 //设置内容（使用函数关闭保存在html变量中）
 iw.setContent（html）; 
 //打开标记上的infowindow。 $ b iw.open（map，marker）; 
}）; 
} 
  

概念证明小提琴

程式码片段：

var geocoder; var map; function initialize（）{var map = new google.maps.Map（document .getElementById（map_canvas），{center：new google.maps.LatLng（37.4419，-122.1419），zoom：13，mapTypeId：google.maps.MapTypeId.ROADMAP}）; var marker1 = new google.maps.Marker（{position：new google.maps.LatLng（37.4419，-122.1419），map：map}）; infoWindow（marker1，map，title1，address1，http://www.google.com）var marker2 = new google.maps.Marker（{position：new google.maps.LatLng（37.44，-122.14 ），map：map}）; infoWindow（marker2，map，title2，address2，http://www.yahoo.com）} google.maps.event.addDomListener（window，load，initialize）; //全局infowindowvar iw = new google.maps.InfoWindow（{maxWidth：350}）; function infoWindow（marker，map，title，address，url）{google.maps.event.addListener（marker，'click'，function（）{var html = < div>< h3>+ title +< / h3>< p>< a href ='+ url +'target ='_ blank'>阅读更多< / a>< （< / div>; //设置内容（使用函数闭包保存在html变量中）iw.setContent（html）; //打开标记上的infowindow iw.open（map，marker）;}） ;}

html，body，＃map_canvas {height：100 ％;宽度：100％; margin：0px; < script src =https：//

I am trying to amend the below code so that all other infoWindows are closed when one is clicked, so only one is open at once. All currently works great, besides the fact that the user can open up to 20 infoWindows. Thanks for your help.

function infoWindow(marker, map, title, address, url) {
 google.maps.event.addListener(marker, 'click', function () {
  var html = "<div><h3>" + title + "</h3><p><a href='" + url + "'>Read More</a></p></div>";
    iw = new google.maps.InfoWindow({
        content: html,
        maxWidth: 350
    });
    iw.open(map, marker);
});
}

解决方案

If you only want one InfoWindow, only create one and move it between markers on the click event.

updated code:

// global infowindow
var iw = new google.maps.InfoWindow({
  maxWidth: 350
});

function infoWindow(marker, map, title, address, url) {
  google.maps.event.addListener(marker, 'click', function() {
    var html = "<div><h3>" + title + "</h3><p><a href='" + url + "'>Read More</a></p></div>";
    // set the content (saved in html variable using function closure)
    iw.setContent(html);
    // open the infowindow on the marker.
    iw.open(map, marker);
  });
}

proof of concept fiddle

code snippet:

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var marker1 = new google.maps.Marker({
    position: new google.maps.LatLng(37.4419, -122.1419),
    map: map
  });
  infoWindow(marker1, map, "title1", "address1", "http://www.google.com")
  var marker2 = new google.maps.Marker({
    position: new google.maps.LatLng(37.44, -122.14),
    map: map
  });
  infoWindow(marker2, map, "title2", "address2", "http://www.yahoo.com")


}
google.maps.event.addDomListener(window, "load", initialize);
// global infowindow
var iw = new google.maps.InfoWindow({
  maxWidth: 350
});

function infoWindow(marker, map, title, address, url) {
  google.maps.event.addListener(marker, 'click', function() {
    var html = "<div><h3>" + title + "</h3><p><a href='" + url + "' target='_blank'>Read More</a></p></div>";
    // set the content (saved in html variable using function closure)
    iw.setContent(html);
    // open the infowindow on the marker.
    iw.open(map, marker);
  });
}

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

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

这篇关于单击时关闭所有其他InfoWindows的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！