Google Maps: Auto fermer InfoWindows ouvert?

Question

Sur mon site , je suis en utilisant l'API Google Maps v3 pour placer des marqueurs de maison sur la carte.

Les InfoWindows restent ouverts, sauf si vous cliquez sur l'icône de façon explicite à proximité. Signification, vous pouvez 2+ InfoWindows ouvert à la fois si vous passez la souris sur le marqueur de carte.

Question : Comment puis-je faire en sorte que seul le InfoWindow actif courant est ouvert et tous les autres InfoWindows sont fermés? Ce qui signifie, pas plus de 1 InfoWindow sera ouvert à la fois?

Answer 1

Il y a un fonction pour InfoWindows. Il suffit de garder la trace de la dernière fenêtre ouverte, et appeler la fonction près quand une nouvelle fenêtre est créée.

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

Answer 2

solution alternative pour cela avec l'aide de nombreux infowindows: sauver prev OpenED InfoWindow dans une variable puis fermez quand une nouvelle fenêtre 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);
    });
}

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

Ceci « déplacer » la fenêtre d'information autour de chaque clic sur le marqueur, en effet se fermer, rouvrir ensuite (et panoramique pour adapter la fenêtre) dans son nouvel emplacement. Il change son contenu avant d'ouvrir pour donner l'effet désiré. Fonctionne pour les marqueurs n.

Answer 4

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

Answer 5

href="http://www.svennerberg.com/2009/09/google-maps-api-3-infowindows/" De ce lien http: //www.svennerberg. com / 2009/09 / google-maps-api-3-infowindows / :

  

Teo: La façon la plus simple est de   juste avoir une instance de la   InfoWindow objet que vous réutilisez plus   et encore. De cette façon, lorsque vous   cliquez sur un nouveau marqueur est le InfoWindow   « Déplacé » d'où il est actuellement,   au point au nouveau marqueur.

     

Utiliser son procédé de setContent pour le charger   avec le contenu approprié.

Answer 6

Il existe un moyen plus facile en plus d'utiliser la fonction close (). si vous créez une variable avec la propriété InfoWindow elle se ferme automatiquement lorsque vous 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);
    });
}

Answer 7

  

déclarer une variable pour la fenêtre active

var activeInfoWindow; 

  

et lier ce code dans auditeur marqueur

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

Answer 8

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 planer au-dessus et il va se fermer.

Answer 9

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

Answer 10

J'emmagasinés une variable au sommet de garder une trace dont la fenêtre d'information est actuellement ouvert, 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;  
}); 

Answer 11

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