Google Maps: Auto chiude aperto InfoWindows?

Sul mio sito , sto utilizzando l’API di Google Maps v3 per posizionare indicatori di casa sulla mappa.

Le windows di informazioni rimangono aperte a meno che non si fa esplicitamente clic sull’icona di chiusura. Significa che puoi aprire più di 2 InfoWindows alla volta se passi il mouse sopra l’indicatore della mappa.

Domanda : Come posso fare in modo che solo l’attuale InfoWindow triggers sia aperta e tutte le altre InfoWindows siano chiuse? Significato, non più di 1 InfoWindow sarà aperto alla volta?

C’è una funzione close () per InfoWindows. Tieni traccia dell’ultima finestra aperta e chiama la funzione di chiusura su di essa quando viene creata una nuova finestra.

Questa demo ha la funzionalità che stai cercando. L’ho trovato nella demo gallery di Maps API V3 .

soluzione alternativa per questo con l’utilizzo di molte infowindows: salva anteprima in apertura in una variabile e poi chiudila quando si apre una nuova finestra

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); }); } 
 //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 } ); 

Questo “sposta” la finestra delle informazioni attorno a ciascun marker cliccato, in effetti chiudendo se stesso, quindi riaprendo (e spostando il panning per adattarlo al viewport) nella sua nuova posizione. Cambia il suo contenuto prima di aprirsi per dare l’effetto desiderato. Funziona con n marker.

La mia soluzione

 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); } 

Da questo link http://www.svennerberg.com/2009/09/google-maps-api-3-infowindows/ :

Teo: il modo più semplice per farlo è avere solo un’istanza dell’object InfoWindow che riutilizzi più e più volte. In questo modo quando fai clic su un nuovo marker, l’informazioneWindow viene “spostata” da dove si trova attualmente, per puntare al nuovo indicatore.

Usa il suo metodo setContent per caricarlo con il contenuto corretto.

C’è un modo più semplice oltre all’utilizzo della funzione close (). se si crea una variabile con la proprietà InfoWindow si chiude automaticamente quando si apre un altro.

 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), '

Location Name 1
Address 1

'); createLocationOnMap('Location Name 2', new google.maps.LatLng(33.84625, -84.36212), '

Location Name 1
Address 2

'); } 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); }); }

Che ne dite di –

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

Quindi puoi passarci sopra e si chiuderà.

 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(); }; ... } } 

Ho memorizzato una variabile in alto per tenere traccia di quale finestra di informazioni è attualmente aperta, vedi sotto.

 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 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); }));