Google Maps : Fermer automatiquement les InfoWindows ouvertes ?

Question

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

Les fenêtres d'information restent ouvertes sauf si vous cliquez explicitement sur l'icône de fermeture. Autrement dit, vous pouvez avoir plus de deux fenêtres d'information ouvertes en même temps si vous passez la souris sur le marqueur de carte.

Question : Comment faire en sorte que seule la fenêtre d'information active soit ouverte et que toutes les autres fenêtres d'information soient fermées ? Autrement dit, il n'y a pas plus d'une fenêtre d'information ouverte à la fois ?

Answer 1

Il existe un fermer() pour les InfoWindows. Il suffit de garder la trace de la dernière fenêtre ouverte et d'appeler la fonction de fermeture de celle-ci lorsqu'une nouvelle fenêtre est créée.

Answer 2

Solution alternative pour l'utilisation de plusieurs infofenêtres : sauvegarder l'infofenêtre ouverte précédemment dans une variable, puis la fermer à l'ouverture de la 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);
    });
}

Answer 3

//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 va "déplacer" la fenêtre d'information autour de chaque marqueur cliqué, en se fermant elle-même, puis en la rouvrant (et en l'adaptant à la fenêtre d'affichage) à son nouvel emplacement. Elle modifie son contenu avant l'ouverture pour donner l'effet désiré. Fonctionne pour n marqueurs.

Answer 4

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

Teo : La façon la plus simple de faire ça est de d'avoir une seule instance de l'objet InfoWindow que vous réutilisez encore et encore encore et encore. Ainsi, lorsque vous cliquez sur un nouveau marqueur, la fenêtre d'information est "déplacée" de l'endroit où elle se trouve actuellement, pour pointer sur le nouveau marqueur.

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

Answer 5

Il existe un moyen plus simple que 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);
    });
}