Google Maps: InfoWindows automatisch schließen?

108

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?

Ted
quelle
1
Für mich ist es besser, nur ein Infofenster zu erstellen und es zu aktualisieren (Inhalt usw.), zu öffnen und zu schließen und alles. Ich bin mir jedoch ziemlich sicher, dass dieser Ansatz nicht immer anwendbar ist.
Andrii

Antworten:

153

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 .

Chris B.
quelle
4
Upvoted für den Vorschlag, nur das zuletzt geöffnete Fenster im Auge zu behalten. Sieht aus wie ein Kinderspiel, aber die Leute vergessen diese Dinge ...
Rémi Breton
1
Ich habe gerade genau die gleiche Technik angewendet. Danke Chris. Es war für mich notwendig, weil ich ein Array von InfoWindow-Objekten verwende, anstatt nur eines, das die relevanten Informationen durchläuft und abruft. Jedes InfoWindow hat seine eigenen Informationen zum Aktualisieren, daher fand ich diese Technik sehr nützlich.
InterfaceGuy
2
Der Link "Diese Demo" ist defekt
Brendan Whiting
64

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);
    });
}
Mike
quelle
3
Wie dieser. Einfach zu verstehen und umzusetzen
Aamir Afridi
6
Verzeihen Sie meine Naivität, aber WTF ist Basis?
Worte für den
Ich verstehe nicht, warum es nicht das Standardverhalten in Google Maps V3 ist ...
Mr Washington
Beste und einfachste Lösung, die ich bisher gefunden habe. Danke!
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
    }
);

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.

Joel Mellon
quelle
1
Kurzer Hinweis: Wiederholte Aufrufe von infowindow.open () sind ausreichend. Das Fenster muss nicht zuerst geschlossen werden.
Eric Nguyen
3
@Eric, obwohl Sie technisch korrekt sind, habe ich einen Fehler bemerkt, der manchmal dazu führt, dass Infofenster an ihrer letzten Position angezeigt werden. Das Erzwingen geschlossener erster Niederlagen besagte den Fehler.
Joel Mellon
22

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);
});
Kaidoj
quelle
3
Das ist wirklich elegant - nur wenn Sie nur ein einziges Infofenster verwenden und den Inhalt ändern, müssen Sie nicht das vorherige verfolgen / schließen.
Nick F
Diese Lösung ist in der Tat sehr elegant und wirkt wie ein Zauber. +1
Sebastian Breit
9

Ü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.

Keith Adler
quelle
Ich glaube nicht, dass dies zutrifft, da ich die Google Maps v3 API verwende
Ted
Außerdem zeigt der Artikel, den Sie ebenfalls verlinkt haben, nicht mehr als 1 Marker
Ted
Ich habe ein einzelnes Infofenster auf dieselbe Weise für mehrere Websites verwendet. Klicken Sie auf eins, das geöffnete wird automatisch geschlossen.
Keith Adler
4
Wie ordnen Sie einem einzelnen InfoWindow mehrere Marken zu?
Ted
7

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;
});
Hardeep Singh
quelle
Danke, es funktioniert wirklich, wenn Sie irgendwo auf die Karte klicken.
Varinder Singh Baidwan
Prost, Alter, von allen Vorschlägen hat das am besten für mich funktioniert und ist sauber AF.
Matthew Ellis
4

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);
    });
}
MelloG
quelle
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();
        };
        ...
    }
}
DK
quelle
Vielen Dank, ich musste das Infofenster schließen, wenn ich nicht auf eine Markierung klickte, also nur auf der Karte
VRC
1

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.

Nathan
quelle
Dies ist eine interessante Problemumgehung, die jedoch die Frage nicht beantwortet und nicht nur auf Touch-Geräten funktioniert.
Lee
1

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;  
}); 
P Nelson
quelle
Was macht [Zähler] hier?
Lee
0

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 %}
Josh
quelle
-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);
}));
Sai
quelle