Öffnen Sie nur ein InfoWindow in Google Maps API v3

Ich muss nur ein InfoWindow auf meiner Google Map geöffnet haben. Ich muss alle anderen InfoWindows schließen, bevor ich ein neues öffne.

Kann mir jemand zeigen, wie das geht?

Sie müssen nur ein InfoWindowObjekt erstellen , einen Verweis darauf behalten und es für alle Markierungen wiederverwenden. Zitieren aus den Google Maps API-Dokumenten :

Wenn jeweils nur ein Infofenster angezeigt werden soll (wie dies bei Google Maps der Fall ist), müssen Sie nur ein Infofenster erstellen, das Sie bei Kartenereignissen (z. B. Benutzerklicks) verschiedenen Orten oder Markierungen zuweisen können.

Daher möchten Sie das InfoWindowObjekt möglicherweise einfach direkt nach der Initialisierung Ihrer Karte erstellen und dann die clickEreignishandler Ihrer Markierungen wie folgt behandeln. Angenommen, Sie haben einen Marker namens someMarker:

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

Dann InfoWindowsollte sich das automatisch schließen, wenn Sie auf eine neue Markierung klicken, ohne die close()Methode aufrufen zu müssen .

Erstellen Sie Ihr Infofenster außerhalb des Bereichs, damit Sie es freigeben können.

Hier ist ein einfaches Beispiel:

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

Ich hatte das gleiche Problem, aber die beste Antwort löste es nicht vollständig. Was ich in meiner for-Anweisung tun musste, war, dies in Bezug auf meinen aktuellen Marker zu verwenden. Vielleicht hilft das jemandem.

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

ein bisschen spät, aber ich habe es geschafft, nur ein Infofenster zu öffnen, indem ich infowindow zu einer globalen Variablen gemacht habe.

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

dann im Listener

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

infowindow.open(map, this);

Deklarieren Sie einen Globar var selectedInfoWindow;und verwenden Sie ihn, um das geöffnete Infofenster zu halten:

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

Sie müssen Ihr vorheriges InfoWindow- Objekt verfolgen und die Methode close aufrufen , wenn Sie das Klickereignis für eine neue Markierung behandeln .

Hinweis: Es ist nicht erforderlich, close für das Objekt des freigegebenen Infofensters aufzurufen. Wenn Sie open mit einer anderen Markierung aufrufen, wird das Original automatisch geschlossen. Siehe Daniels Antwort für Details.

Grundsätzlich möchten Sie eine Funktion, die auf eins verweist new InfoBox()=> das onclick-Ereignis delegieren. Verwenden Sie beim Erstellen Ihrer Marker (in einer Schleife)bindInfoBox(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 infoBoxwird asynchron zugewiesen und gespeichert. Jedes Mal, wenn Sie bindInfoBox()die Rückgabefunktion aufrufen, wird stattdessen aufgerufen. Auch praktisch, um das infoBoxOptionsnur einmal zu bestehen!

In meinem Beispiel musste ich dem einen zusätzlichen Parameter hinzufügen, mapda meine Initialisierung durch Registerkartenereignisse verzögert wird.

InfoBoxOptions

Hier ist eine Lösung, bei der nicht nur ein infoWindow erstellt werden muss, um es wiederzuverwenden. Sie können weiterhin viele infoWindows erstellen. Sie müssen lediglich eine closeAllInfoWindows-Funktion erstellen und diese aufrufen, bevor Sie ein neues Infowindow öffnen. Wenn Sie also Ihren Code behalten, müssen Sie nur:

1. Erstellen Sie ein globales Array, um alle infoWindows zu speichern

   var infoWindows = [];

2. Speichern Sie jedes neue infoWindow im Array, direkt nach dem infoWindow = new ...

   infoWindows.push(infoWindow);

3. Erstellen Sie die Funktion closeAllInfoWindows

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

4. Rufen Sie in Ihrem Code closeAllInfoWindows () auf, bevor Sie das infoWindow öffnen.

Grüße,

Es wurde folgendermaßen gelöst:

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

Mit Google Maps können Sie nur ein Infofenster öffnen. Wenn Sie also ein neues Fenster öffnen, wird das andere automatisch geschlossen.