web-dev-qa-db-fra.com

Google Maps: Fermer automatiquement ouvrir InfoWindows?

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

Les fenêtres d'information restent ouvertes à moins que vous ne cliquiez explicitement sur l'icône de fermeture. Cela signifie que vous pouvez avoir plus de 2 fenêtres d'Info ouvertes à la fois si vous survolez le marqueur de carte.

Question : Comment faire en sorte que seul l’InfoWindow actif soit ouvert et que tous les autres InfoWindows soient fermés? Sens, pas plus de 1 InfoWindow sera ouvert à la fois?

javascriptgoogle-mapsgoogle-maps-api-3
103
Ted

Il existe une fonction close () pour InfoWindows. Il suffit de garder trace de la dernière fenêtre ouverte et d’appeler la fonction de fermeture quand une nouvelle fenêtre est créée.

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

149
Chris B

solution alternative pour cela avec l'utilisation de nombreuses infowindows: save prev ouvert dans une variable infowindow, puis fermez-le quand une nouvelle fenêtre est ouverte

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);
    });
}
61
mike
//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'information autour de chaque marqueur cliqué, en se fermant, puis en se rouvrant (et en se déplaçant pour s'adapter à la fenêtre d'affichage) dans son nouvel emplacement. Il change son contenu avant de s'ouvrir pour donner l'effet désiré. Fonctionne pour n marqueurs.

26
Joel Mellon

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

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

Teo: Le moyen le plus simple de procéder consiste à ne réutiliser qu'une seule fois l'objet InfoWindow. Ainsi, lorsque vous cliquez sur un nouveau marqueur, l’infoWindow est "déplacée" de son emplacement actuel vers le nouveau marqueur.

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

9
Keith Adler

Il existe un moyen plus facile d’utiliser la fonction close (). Si vous créez une variable avec la propriété InfoWindow, celle-ci se ferme automatiquement à l'ouverture d'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);
    });
}
5
MelloG

Déclarer une variable pour la fenêtre active

var activeInfoWindow;

et lier ce code dans l'écouteur de marqueur

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

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 passer la souris dessus et il se fermera tout seul.

2
Nathan
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();
        };
        ...
    }
}
1
D K

J'ai stocké une variable en haut pour savoir quelle fenêtre d'informations est 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;  
});
1
P Nelson