Google Maps: fermer automatiquement InfoWindows ouvert?

Sur mon site , j'utilise l'API Google Maps v3 pour placer des marqueurs de maison sur la carte.

Les InfoWindows restent ouvertes sauf si vous cliquez explicitement sur l'icône de fermeture. Cela signifie que vous pouvez ouvrir plus de 2 InfoWindows à la fois si vous survolez le marqueur de la carte.

Question : Comment faire pour que seule l'InfoWindow active actuelle soit ouverte et que toutes les autres InfoWindows soient fermées? Cela signifie que pas plus de 1 InfoWindow sera ouverte à la fois?

Il existe une fonction close () pour InfoWindows. Gardez simplement une trace de la dernière fenêtre ouverte et appelez-y la fonction de fermeture lorsqu'une nouvelle fenêtre est créée.

Cette démo a la fonctionnalité que vous recherchez. Je l'ai trouvé dans la galerie de démonstration de l'API Maps V3 .

solution alternative pour cela avec l'utilisation de nombreuses infowindows: enregistrer la fenêtre précédente ouverte dans une variable puis la fermer à l'ouverture d'une nouvelle fenêtre

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

Cela "déplacera" la fenêtre d'informations autour de chaque marqueur cliqué, en se fermant, puis en la rouvrant (et en effectuant un panoramique pour s'adapter à la fenêtre) à son nouvel emplacement. Il change son contenu avant de s'ouvrir pour donner l'effet désiré. Fonctionne pour n marqueurs.

Ma solution.

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

À partir de ce lien http://www.svennerberg.com/2009/09/google-maps-api-3-infowindows/ :

Teo: Le moyen le plus simple de le faire est de n'avoir qu'une seule instance de l'objet InfoWindow que vous réutilisez encore et encore. De cette façon, lorsque vous cliquez sur un nouveau marqueur, infoWindow est «déplacé» de l'endroit où il se trouve actuellement, pour pointer vers le nouveau marqueur.

Utilisez sa méthode setContent pour le charger avec le contenu correct.

Déclarer une variable pour la fenêtre active

var activeInfoWindow; 

et lier ce code dans le marqueur écouteur

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

Il existe un moyen plus simple en plus d'utiliser la fonction close (). si vous créez une variable avec la propriété InfoWindow, elle se ferme automatiquement lorsque vous en ouvrez une autre.

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

Que diriez-vous -

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

    });

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

    });

Ensuite, vous pouvez simplement le survoler et il se fermera.

J'ai stocké une variable en haut pour garder une trace de la fenêtre d'informations actuellement ouverte, voir ci-dessous.

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

Voici ce que j'ai utilisé si vous utilisez de nombreux marqueurs dans une boucle for (Django ici). Vous pouvez définir un index sur chaque marqueur et définir cet index chaque fois que vous ouvrez une fenêtre. Fermeture de l'index précédemment enregistré:

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