Google Maps: InfoWindows automatisch schließen?

Auf meiner Website verwende ich Google Maps API v3, um Hausmarkierungen auf der Karte zu platzieren.

Die InfoWindows bleiben geöffnet, es sei denn, Sie klicken explizit auf das Schließen-Symbol. Das heißt, Sie können 2+ InfoWindows gleichzeitig geöffnet haben, wenn Sie mit der Maus über die Kartenmarkierung fahren.

Frage : Wie mache ich es so, dass nur das aktuell aktive InfoWindow geöffnet und alle anderen InfoWindows geschlossen sind? Das heißt, es ist nicht mehr als 1 InfoWindow gleichzeitig geöffnet?

Es gibt eine close () - Funktion für InfoWindows. Behalten Sie einfach den Überblick über das zuletzt geöffnete Fenster und rufen Sie die Funktion zum Schließen auf, wenn ein neues Fenster erstellt wird.

Diese Demo hat die Funktionalität, die Sie suchen. Ich habe es in der Maps API V3-Demogalerie gefunden .

Alternative Lösung für die Verwendung vieler Infofenster: Speichern Sie das zuvor geöffnete Infofenster in einer Variablen und schließen Sie es, wenn ein neues Fenster geöffnet wird

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

Dadurch wird das Infofenster zu jeder angeklickten Markierung "verschoben", wodurch es sich selbst schließt und an seiner neuen Position erneut geöffnet (und geschwenkt, um es an das Ansichtsfenster anzupassen). Es ändert seinen Inhalt vor dem Öffnen, um den gewünschten Effekt zu erzielen. Funktioniert für n Marker.

Meine Lösung.

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

Über diesen Link http://www.svennerberg.com/2009/09/google-maps-api-3-infowindows/ :

Teo: Der einfachste Weg, dies zu tun, besteht darin, nur eine Instanz des InfoWindow-Objekts zu haben, die Sie immer wieder verwenden. Auf diese Weise wird das infoWindow beim Klicken auf eine neue Markierung von der aktuellen Position „verschoben“, um auf die neue Markierung zu zeigen.

Verwenden Sie die setContent-Methode, um sie mit dem richtigen Inhalt zu laden.

Deklarieren Sie eine Variable für das aktive Fenster

var activeInfoWindow; 

und binden Sie diesen Code im Marker Listener

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

Neben der Funktion close () gibt es einen einfacheren Weg. Wenn Sie eine Variable mit der InfoWindow-Eigenschaft erstellen, wird diese automatisch geschlossen, wenn Sie eine andere öffnen.

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

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

Wie wäre es mit -

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

    });

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

    });

Dann können Sie einfach darüber schweben und es wird sich schließen.

Ich habe oben eine Variable gespeichert, um zu verfolgen, welches Infofenster derzeit geöffnet ist (siehe unten).

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

Folgendes habe ich verwendet, wenn Sie viele Marker in einer for-Schleife verwenden (Django hier). Sie können für jeden Marker einen Index festlegen und diesen Index jedes Mal festlegen, wenn Sie ein Fenster öffnen. Schließen des zuvor gespeicherten Index:

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

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