Google Maps: Auto close open InfoWindows?

On my site, I'm using Google Maps API v3 to place house markers on the map.

The InfoWindows stay open unless you explicitly click the close icon. Meaning, you can have 2+ InfoWindows open at a time if you hover over the map marker.

Question: How do I make it so that only the current active InfoWindow is open and all other InfoWindows are closed? Meaning, no more than 1 InfoWindow will be open at a time?

161739 次浏览
小开

从这个链接 http://www.svennerberg.com/2009/09/google-maps-api-3-infowindows/:

泰欧: 最简单的方法是 只有一个 重用的 InfoWindow 对象 一遍又一遍，这样当你 click a new marker the infoWindow is “moved” from where it’s currently at, 指向新的标记。

使用其 setContent 方法加载它 正确的内容。

小开
最佳答案

InfoWindows 有一个 关闭()函数。只需跟踪最后打开的窗口，并在创建新窗口时调用关闭函数。

小开 
//assuming you have a map called 'map'
var infowindow = new google.maps.InfoWindow();


var latlng1 = new google.maps.LatLng(0,0);
var marker1 = new google.maps.Marker({position:latlng1, map:map});
google.maps.event.addListener(marker1, 'click',
function(){
infowindow.close();//hide the infowindow
infowindow.setContent('Marker #1');//update the content for this marker
infowindow.open(map, marker1);//"move" the info window to the clicked marker and open it
}
);
var latlng2 = new google.maps.LatLng(10,10);
var marker2 = new google.maps.Marker({position:latlng2, map:map});
google.maps.event.addListener(marker2, 'click',
function(){
infowindow.close();//hide the infowindow
infowindow.setContent('Marker #2');//update the content for this marker
infowindow.open(map, marker2);//"move" the info window to the clicked marker and open it
}
);

This will "move" the info window around to each clicked marker, in effect closing itself, then reopening (and panning to fit the viewport) in its new location. It changes its contents before opening to give the desired effect. Works for n markers.

小开 
var map;
var infowindow;
...
function createMarker(...) {
var marker = new google.maps.Marker({...});
google.maps.event.addListener(marker, 'click', function() {
...
if (infowindow) {
infowindow.close();
};
infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 300
});
infowindow.open(map, marker);
}
...
function initialize() {
...
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
...
google.maps.event.addListener(map, 'click', function(event) {
if (infowindow) {
infowindow.close();
};
...
}
}
小开

alternative solution for this with using many infowindows: 在变量中保存上一次打开的 inowindow，然后在新窗口打开时关闭它

var prev_infowindow =false;
...
base.attachInfo = function(marker, i){
var infowindow = new google.maps.InfoWindow({
content: 'yourmarkerinfocontent'
});


google.maps.event.addListener(marker, 'click', function(){
if( prev_infowindow ) {
prev_infowindow.close();
}


prev_infowindow = infowindow;
infowindow.open(base.map, marker);
});
}
小开

除了使用 close ()函数之外，还有一种更简单的方法。如果使用 InfoWindow 属性创建变量，则当打开另一个变量时，该变量将自动关闭。

var info_window;
var map;
var chicago = new google.maps.LatLng(33.84659, -84.35686);


function initialize() {
var mapOptions = {
center: chicago,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);


info_window = new google.maps.InfoWindow({
content: 'loading'
)};


createLocationOnMap('Location Name 1', new google.maps.LatLng(33.84659, -84.35686), '<p><strong>Location Name 1</strong><br/>Address 1</p>');
createLocationOnMap('Location Name 2', new google.maps.LatLng(33.84625, -84.36212), '<p><strong>Location Name 1</strong><br/>Address 2</p>');


}


function createLocationOnMap(titulo, posicao, conteudo) {
var m = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
title: titulo,
position: posicao,
html: conteudo
});


google.maps.event.addListener(m, 'click', function () {
info_window.setContent(this.html);
info_window.open(map, this);
});
}
小开

How about - 

google.maps.event.addListener(yourMarker, 'mouseover', function () {
yourInfoWindow.open(yourMap, yourMarker);


});


google.maps.event.addListener(yourMarker, 'mouseout', function () {
yourInfoWindow.open(yourMap, yourMarker);


});

然后你可以悬停在它上面，它就会自动关闭。

小开

我在顶部存储了一个变量来跟踪当前打开的信息窗口，见下文。

var currentInfoWin = null;
google.maps.event.addListener(markers[counter], 'click', function() {
if (currentInfoWin !== null) {
currentInfoWin.close(map, this);
}
this.infoWin.open(map, this);
currentInfoWin = this.infoWin;
});
小开

我的解决办法。

var map;
var infowindow = new google.maps.InfoWindow();
...
function createMarker(...) {
var marker = new google.maps.Marker({
...,
descrip: infowindowHtmlContent
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setOptions({
content: this.descrip,
maxWidth:300
});
infowindow.open(map, marker);
});
小开 
var contentString = "Location: " + results[1].formatted_address;
google.maps.event.addListener(marker,'click', (function(){
infowindow.close();
infowindow = new google.maps.InfoWindow({
content: contentString
});
infowindow.open(map, marker);
}));
小开

为活动窗口声明变量

var activeInfoWindow;

并在标记侦听器中绑定此代码

 marker.addListener('click', function () {
if (activeInfoWindow) { activeInfoWindow.close();}
infowindow.open(map, marker);
activeInfoWindow = infowindow;
});
小开

如果您在 for 循环中使用了许多标记，以下是我使用的代码(这里是 Django)。可以在每个标记上设置索引，并在每次打开窗口时设置该索引。关闭先前保存的索引:

markers = Array();
infoWindows = Array();
var prev_infowindow =false;
{% for obj in objects %}
var contentString = 'your content'
var infowindow = new google.maps.InfoWindow({
content: contentString,
});
var marker = new google.maps.Marker({
position: {lat: \{\{ obj.lat }}, lng: \{\{ obj.lon }}},
map: map,
title: '\{\{ obj.name }}',
infoWindowIndex : \{\{ forloop.counter0 }}
});
google.maps.event.addListener(marker, 'click',
function(event)
{
if( prev_infowindow ) {
infoWindows[prev_infowindow].close();
}
prev_infowindow = this.infoWindowIndex;
infoWindows[this.infoWindowIndex].open(map, this);
}
);


infoWindows.push(infowindow);
markers.push(marker);


{% endfor %}

提交答案