Google Maps: chiudere automaticamente le InfoWindows aperte?


108

Sul mio sito utilizzo l'API di Google Maps v3 per posizionare gli indicatori di casa sulla mappa.

Le InfoWindows rimangono aperte a meno che non si faccia clic esplicitamente sull'icona di chiusura. Ciò significa che puoi avere più di 2 InfoWindows aperte contemporaneamente se passi il mouse sopra l'indicatore della mappa.

Domanda : come posso fare in modo che solo l'InfoWindow attivo corrente sia aperto e tutte le altre InfoWindow siano chiuse? Significa che non sarà aperta più di 1 InfoWindow alla volta?


1
Per quanto mi riguarda è meglio creare una sola finestra informativa e aggiornarla (è contenuto e così via), aprire e chiudere e tutto. Ma sono abbastanza sicuro che questo approccio non sia sempre applicabile.
andrii

Risposte:


154

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 le funzionalità che stai cercando. L'ho trovato nella galleria demo di Maps API V3 .


4
Votato per il suggerimento di tenere traccia solo dell'ultima finestra aperta. Sembra un gioco da ragazzi, ma la gente dimentica quelle cose ...
Rémi Breton

1
Ho appena usato la stessa identica tecnica. Grazie Chris. Era necessario per me, perché sto usando un array di oggetti InfoWindow invece di uno solo che scorre e acquisisce le informazioni pertinenti. Ogni InfoWindow ha le proprie informazioni di aggiornamento separate, quindi ho trovato questa tecnica molto utile.
InterfaceGuy

2
il collegamento "questa demo" è interrotto
Brendan Whiting

Grazie mille! Ho utilizzato questo approccio e ha funzionato a meraviglia. Hai fissato la mia giornata. Upvoted.
Alan Espinet

64

soluzione alternativa per questo utilizzando molte finestre informative: salva la finestra precedente aperta 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);
    });
}

3
Come questo. Semplice da capire e implementare
Aamir Afridi

6
Perdona la mia ingenuità, ma WTF è vile?
parole per il

Non capisco perché non è il comportamento predefinito in Google Maps V3 ...
Mr Washington

La soluzione migliore e più semplice che ho trovato finora. grazie!
Irteza Asad

27
//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 "sposterà" la finestra delle informazioni su ogni indicatore cliccato, chiudendosi in effetti da solo, quindi riaprendo (e facendo una panoramica per adattare la visualizzazione) nella sua nuova posizione. Cambia il suo contenuto prima dell'apertura per dare l'effetto desiderato. Funziona per n marker.


1
Nota rapida: sono sufficienti chiamate ripetute a infowindow.open (); la finestra non ha bisogno di essere chiusa prima.
Eric Nguyen

3
@ Eric, anche se tecnicamente hai ragione, ho notato un bug che a volte fa apparire le finestre informative nella loro ultima posizione. Forzare le prime sconfitte chiuse ha detto bug.
Joel Mellon

22

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

3
È davvero elegante: utilizzare solo una singola finestra informativa e modificare il contenuto evita di dover tenere traccia / chiudere quella precedente.
Nick F

Questa soluzione è davvero molto elegante e funziona come un fascino. +1
Sebastian Breit

9

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'oggetto InfoWindow che riutilizzi più e più volte. In questo modo, quando si fa clic su un nuovo marker, la infoWindow viene "spostata" da dove si trova attualmente per puntare al nuovo marker.

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


Non credo che ciò si applichi poiché sto utilizzando l'API di Google Maps v3
Ted

Inoltre, anche l'articolo che hai collegato non mostra più di 1 marker
Ted

Ho utilizzato una singola finestra informativa allo stesso modo per diversi siti. Fare clic su uno, quello aperto si chiude automaticamente.
Keith Adler,

4
Come si associano più indicatori a una singola InfoWindow?
Ted

7

Dichiara una variabile per la finestra attiva

var activeInfoWindow; 

e associa questo codice al marker listener

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

Grazie, funziona davvero quando si fa clic in un punto qualsiasi della mappa.
Varinder Singh Baidwan

Ciao amico, tra tutti i suggerimenti, questo ha funzionato meglio per me ed è un AF pulito.
Matthew Ellis

4

C'è un modo più semplice oltre a usare la funzione close (). se crei una variabile con la proprietà InfoWindow, si chiude automaticamente quando ne apri un'altra.

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

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

Grazie, avevo bisogno di chiudere la finestra delle informazioni quando non facevo clic su un indicatore, quindi solo sulla mappa
VRC

1

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 semplicemente passare il mouse su di esso e si chiuderà da solo.


Questa è una soluzione interessante ma non risponde alla domanda e non funzionerebbe su dispositivi solo touch.
Lee

1

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

Cosa ci fa [contatore] qui?
Lee

0

Ecco cosa ho usato se stai usando molti marker in un ciclo for (Django qui). Puoi impostare un indice su ogni indicatore e impostare quell'indice ogni volta che apri una finestra. Chiusura dell'indice precedentemente salvato:

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 %}

-1
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);
}));
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.