web-dev-qa-db-fra.com

Ouvrez une seule fenêtre d'information dans Google Maps API v3.

Je n'ai besoin que d'un seul InfoWindow ouvert sur Google Map. Je dois fermer toutes les autres fenêtres d’information avant d’en ouvrir une nouvelle.

Quelqu'un peut-il me montrer comment faire cela?

javascriptgoogle-mapsgoogle-maps-api-3
84
leo

Vous devez créer un seul objet InfoWindow, en garder une référence et le réutiliser pour tous les marqueurs. Citations tirées des documents de l'API Google Maps :

Si vous souhaitez uniquement afficher une fenêtre d'information à la fois (comme c'est le cas sur Google Maps), il vous suffit de créer une fenêtre d'information, que vous pouvez réaffecter à différents emplacements ou marqueurs lors d'événements de carte (tels que les clics de l'utilisateur).

Par conséquent, vous souhaiterez peut-être simplement créer l'objet InfoWindow juste après avoir initialisé votre carte, puis gérer les gestionnaires d'événements 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);
});

Ensuite, la InfoWindow devrait se fermer automatiquement lorsque vous cliquez sur un nouveau marqueur sans avoir à appeler la méthode close().

148
Daniel Vassallo

Créez votre infowindow en dehors de la portée afin de pouvoir la 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);
  });
}
28
skarE

J'avais le même problème, mais la meilleure réponse ne l'a pas complètement résolu. Ce que je devais faire dans ma déclaration, c'était utiliser ceci en relation avec 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);                 
}
12
Ferenc Takacs

un peu tard, mais j'ai réussi à avoir qu'une seule infowindow ouverte en créant 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);
4
user2827958

Déclarez un var selectedInfoWindow; global et utilisez-le pour contenir l'infowindow ouverte:

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

En gros, vous voulez une fonction qui garde la 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 assigné 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 de passer la infoBoxOptions une seule fois!

Dans mon exemple, j'ai dû ajouter un paramètre supplémentaire à map car mon initialisation est retardée par des événements de tabulation.

InfoBoxOptions

0
Tim Vermaelen

Vous devez garder une trace de votre précédent InfoWindow object et appelez la méthode close _ lorsque vous gérez l'événement click sur un nouveau marqueur..

N.B Il n'est pas nécessaire d'appeler close sur l'objet de la fenêtre d'informations partagée, appeler open avec un marqueur différent ferme automatiquement l'original. Voir Réponse de Daniel pour plus de détails.

0
RedBlueThing

Voici une solution qui n'a pas besoin de créer un seul infoWindow pour le réutiliser. Vous pouvez continuer à créer de nombreux infoWindows, la seule chose dont vous avez besoin est de créer une fonction closeAllInfoWindows et de l'appeler avant d'ouvrir une nouvelle info-fenêtre .

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

    var infoWindows = [];

  2. Stockez chaque nouvelle infoWindow dans le tableau, juste après la infoWindow = new ...

    infoWindows.Push(infoWindow);

  3. Créez 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 l'infoWindow.

Cordialement,

0
Jortx