Avoir un seul InfoWindow ouvert dans Google Maps API v3

Question

Je dois avoir une seule InfoWindow ouverte sur mon Google Map. Je dois fermer toutes les autres InfoWindows avant d'ouvrir un nouveau.

Quelqu'un peut-il me montrer comment faire?

Answer 1

Vous devez créer un seul objet InfoWindow, conserver une référence, et réutiliser si pour tous les marqueurs. Je cite l'API Google Maps Docs :

  

Si vous voulez une seule fenêtre d'information pour afficher à la fois (comme le comportement sur Google Maps), vous devez créer une seule fenêtre d'information, que vous pouvez affecter à différents endroits ou des marqueurs sur les événements de carte (comme les clics de l'utilisateur ).

Par conséquent, vous pouvez simplement vouloir créer l'objet InfoWindow juste après l'initialisation de votre carte, puis gérer les gestionnaires d'événements de click de vos marqueurs comme suit. Disons que vous avez un marqueur appelé someMarker:

google.maps.event.addListener(someMarker, 'click', function() {
   infowindow.setContent('Hello World');
   infowindow.open(map, this);
});

Alors le InfoWindow doit se fermer automatiquement lorsque vous cliquez sur un nouveau marqueur sans avoir à appeler la méthode close().

Answer 2

Créez votre infowindow hors de la portée afin que vous puissiez partager.

Voici un exemple simple:

var markers = [AnArrayOfMarkers];
var infowindow = new google.maps.InfoWindow();

for (var i = 0, marker; marker = markers[i]; i++) {
  google.maps.event.addListener(marker, 'click', function(e) {
    infowindow.setContent('Marker position: ' + this.getPosition());
    infowindow.open(map, this);
  });
}

Answer 3

J'ai eu le même problème, mais la meilleure réponse n'a pas résolu complètement, ce que je devais faire dans ma déclaration pour utilisait le présent relatif à mon marqueur actuel. Peut-être que cela aide quelqu'un.

for(var i = 0; i < markers.length; i++){
    name = markers[i].getAttribute("name");
    address = markers[i].getAttribute("address");        
    point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));                                     
    contentString = '<div style="font-family: Lucida Grande, Arial, sans-serif;>'+'<div><b>'+ name +'</b></div>'+'<div>'+ address +'</div>';                    
    marker = new google.maps.Marker({                       
        map: map,
        position: point,
        title: name+" "+address,
        buborek: contentString 
    });                                     
    google.maps.event.addListener(marker, 'click', function(){
        infowindow.setContent(this.buborek); 
        infowindow.open(map,this); 
    });                                                         
    marker.setMap(map);                 
}

Answer 4

un peu en retard, mais je réussi à avoir un seul infowindow ouvert par maken infowindow une variable globale.

var infowindow = new google.maps.InfoWindow({});

puis à l'intérieur du listner

infowindow.close();
infowindow = new google.maps.InfoWindow({   
    content: '<h1>'+arrondissement+'</h1>'+ gemeentesFiltered                           
});

infowindow.open(map, this);

Answer 5

Déclarer une var selectedInfoWindow; mondiale et l'utiliser pour tenir le infowindow ouvert:

var infoWindow = new google.maps.InfoWindow({
    content: content
});

// Open the infowindow on marker click
google.maps.event.addListener(marker, "click", function() {
    //Check if there some info window selected and if is opened then close it
    if (selectedInfoWindow != null && selectedInfoWindow.getMap() != null) {
        selectedInfoWindow.close();
        //If the clicked window is the selected window, deselect it and return
        if (selectedInfoWindow == infoWindow) {
            selectedInfoWindow = null;
            return;
        }
    }
    //If arrive here, that mean you should open the new info window 
    //because is different from the selected
    selectedInfoWindow = infoWindow;
    selectedInfoWindow.open(map, marker);
});

Answer 6

Vous devez garder une trace de votre InfoWindow objet et appelez Fermer méthode sur lorsque vous gérez l'événement cliquez sur un nouveau marqueur .

N.B. Il ne faut pas appeler près de l'objet fenêtre d'information partagée, appelant ouvert avec un autre marqueur fermera automatiquement l'original. Voir la réponse Daniel détails.

Answer 7

Fondamentalement, vous voulez une fonction qui maintient référence à un new InfoBox() => déléguer l'événement onclick. Lors de la création de vos marqueurs (en boucle), utilisez bindInfoBox(xhr, map, marker);

// @param(project): xhr : data for infoBox template
// @param(map): object : google.maps.map
// @param(marker): object : google.maps.marker
bindInfoBox: (function () {
    var options = $.extend({}, cfg.infoBoxOptions, { pixelOffset: new google.maps.Size(-450, -30) }),
        infoBox = new window.InfoBox(options);

    return function (project, map, marker) {
        var tpl = renderTemplate(project, cfg.infoBoxTpl); // similar to Mustache, Handlebars

        google.maps.event.addListener(marker, 'click', function () {
            infoBox.setContent(tpl);
            infoBox.open(map, marker);
        });
    };
}())

var infoBox est affecté de manière asynchrone et conservé en mémoire. Chaque fois que vous appelez bindInfoBox() la fonction de retour sera appelée à la place. Aussi pratique pour passer le infoBoxOptions qu'une seule fois!

Dans mon exemple, j'ai dû ajouter une supplémentaire à la param map que mon initialisation est retardée par les événements de l'onglet.

InfoBoxOptions

Answer 8

Voici une solution qui n'a pas besoin de créer un seul InfoWindow de le réutiliser. Vous pouvez continuer à créer beaucoup infoWindows, la seule chose dont vous avez besoin est de construire une fonction closeAllInfoWindows, et l'appeler avant d'ouvrir une nouvelle infowindow. Ainsi, en gardant votre code, il vous suffit de:

1. Créer un tableau global pour stocker tous les infoWindows

   var infoWindows = [];
   

2. Boutique chaque nouvelle InfoWindow dans le tableau, juste après la InfoWindow = new ...

   infoWindows.push(infoWindow);
   

3. Créer la fonction closeAllInfoWindows

   function closeAllInfoWindows() {
       for (var i=0;i<infoWindows.length;i++) {
           infoWindows[i].close();
       }
   }
   

4. Dans votre code, appelez à closeAllInfoWindows () juste avant d'ouvrir le InfoWindow.

Cordialement,

Answer 9

Résolu cette façon:

function window(content){
    google.maps.event.addListener(marker,'click', (function(){
        infowindow.close();
        infowindow = new google.maps.InfoWindow({
            content: content
        });
        infowindow.open(map, this);
    }))
}
window(contentHtml);

Answer 10

Google Maps vous permet d'avoir une seule fenêtre d'information ouverte. Donc, si vous ouvrez une nouvelle fenêtre, puis l'autre se ferme automatiquement.