Avere una sola InfoWindow aperta nell'API di Google Maps v3

Devo avere una sola InfoWindow aperta sulla mia mappa di Google. Devo chiudere tutte le altre InfoWindows prima di aprirne una nuova.

Qualcuno può mostrarmi come farlo?

È necessario creare un solo InfoWindowoggetto, mantenere un riferimento ad esso e riutilizzarlo per tutti i marker. Citando dai documenti dell'API di Google Maps :

Se desideri che venga visualizzata solo una finestra informativa alla volta (come il comportamento su Google Maps), devi creare solo una finestra informativa, che puoi riassegnare a diverse posizioni o indicatori sugli eventi della mappa (come i clic dell'utente).

Pertanto, potresti semplicemente voler creare l' InfoWindowoggetto subito dopo aver inizializzato la mappa e quindi gestire i clickgestori di eventi dei tuoi marcatori come segue. Supponiamo che tu abbia un marker chiamato someMarker:

google.maps.event.addListener(someMarker, 'click', function() {
   infowindow.setContent('Hello World');
   infowindow.open(map, this);
});

Quindi InfoWindowdovrebbe chiudersi automaticamente quando si fa clic su un nuovo marker senza dover chiamare il close()metodo.

Crea la tua finestra informativa fuori dall'ambito in modo da poterla condividere.

Qui c'è un semplice esempio:

var markers = [AnArrayOfMarkers];
var infowindow = new google.maps.InfoWindow();

for (var i = 0, marker; marker = markers[i]; i++) {
  google.maps.event.addListener(marker, 'click', function(e) {
    infowindow.setContent('Marker position: ' + this.getPosition());
    infowindow.open(map, this);
  });
}

Ho avuto lo stesso problema ma la risposta migliore non lo ha risolto completamente, quello che dovevo fare nella mia dichiarazione for era usare il this relativo al mio attuale marker. Forse questo aiuta qualcuno.

for(var i = 0; i < markers.length; i++){
    name = markers[i].getAttribute("name");
    address = markers[i].getAttribute("address");        
    point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));                                     
    contentString = '<div style="font-family: Lucida Grande, Arial, sans-serif;>'+'<div><b>'+ name +'</b></div>'+'<div>'+ address +'</div>';                    
    marker = new google.maps.Marker({                       
        map: map,
        position: point,
        title: name+" "+address,
        buborek: contentString 
    });                                     
    google.maps.event.addListener(marker, 'click', function(){
        infowindow.setContent(this.buborek); 
        infowindow.open(map,this); 
    });                                                         
    marker.setMap(map);                 
}

un po 'tardi, ma sono riuscito ad avere una sola finestra informativa aperta rendendola una variabile globale.

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

quindi all'interno del listner

infowindow.close();
infowindow = new google.maps.InfoWindow({   
    content: '<h1>'+arrondissement+'</h1>'+ gemeentesFiltered                           
});

infowindow.open(map, this);

Dichiara un globar var selectedInfoWindow;e usalo per mantenere la finestra informativa aperta:

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

// Open the infowindow on marker click
google.maps.event.addListener(marker, "click", function() {
    //Check if there some info window selected and if is opened then close it
    if (selectedInfoWindow != null && selectedInfoWindow.getMap() != null) {
        selectedInfoWindow.close();
        //If the clicked window is the selected window, deselect it and return
        if (selectedInfoWindow == infoWindow) {
            selectedInfoWindow = null;
            return;
        }
    }
    //If arrive here, that mean you should open the new info window 
    //because is different from the selected
    selectedInfoWindow = infoWindow;
    selectedInfoWindow.open(map, marker);
});

È necessario tenere traccia del precedente oggetto InfoWindow e chiamare il metodo di chiusura su di esso quando si gestisce l'evento clic su un nuovo indicatore .

NB Non è necessario chiamare close sull'oggetto finestra info condivisa, chiamando open con un marker diverso si chiuderà automaticamente l'originale. Vedi la risposta di Daniel per i dettagli.

Fondamentalmente vuoi una funzione che mantenga il riferimento a uno new InfoBox()=> delegare l'evento onclick. Mentre crei i tuoi marker (in un ciclo) usabindInfoBox(xhr, map, marker);

// @param(project): xhr : data for infoBox template
// @param(map): object : google.maps.map
// @param(marker): object : google.maps.marker
bindInfoBox: (function () {
    var options = $.extend({}, cfg.infoBoxOptions, { pixelOffset: new google.maps.Size(-450, -30) }),
        infoBox = new window.InfoBox(options);

    return function (project, map, marker) {
        var tpl = renderTemplate(project, cfg.infoBoxTpl); // similar to Mustache, Handlebars

        google.maps.event.addListener(marker, 'click', function () {
            infoBox.setContent(tpl);
            infoBox.open(map, marker);
        });
    };
}())

var infoBoxviene assegnato in modo asincrono e mantenuto in memoria. Ogni volta che chiami bindInfoBox()la funzione return verrà invece chiamata. Comodo anche per passare l' infoBoxOptionsunica volta!

Nel mio esempio ho dovuto aggiungere un parametro extra a mappoiché la mia inizializzazione è ritardata dagli eventi di tabulazione.

InfoBoxOptions

Ecco una soluzione che non ha bisogno di creare una sola infoWindow per riutilizzarla. Puoi continuare a creare molte infoWindows, l'unica cosa di cui hai bisogno è creare una funzione closeAllInfoWindows e chiamarla prima di aprire una nuova infowindow. Quindi, mantenendo il codice, devi solo:

1. Crea un array globale per archiviare tutte le infoWindows

   var infoWindows = [];
   

2. Memorizza ogni nuova infoWindow nell'array, subito dopo infoWindow = new ...

   infoWindows.push(infoWindow);
   

3. Crea la funzione closeAllInfoWindows

   function closeAllInfoWindows() {
       for (var i=0;i<infoWindows.length;i++) {
           infoWindows[i].close();
       }
   }
   

4. Nel codice, chiama a closeAllInfoWindows () appena prima di aprire infoWindow.

Saluti,

Risolto in questo modo:

function window(content){
    google.maps.event.addListener(marker,'click', (function(){
        infowindow.close();
        infowindow = new google.maps.InfoWindow({
            content: content
        });
        infowindow.open(map, this);
    }))
}
window(contentHtml);

Google Maps ti consente di avere solo una finestra informativa aperta. Quindi, se apri una nuova finestra, l'altra si chiude automaticamente.