Je n'ai besoin que d'une seule InfoWindow ouverte sur ma carte Google. Je dois fermer toutes les autres InfoWindows avant d'en ouvrir une nouvelle.
Quelqu'un peut-il me montrer comment faire cela?
Réponses:
Vous devez créer un seul InfoWindow
objet, en garder une référence et le réutiliser pour tous les marqueurs. Citant les documents de l'API Google Maps :
Si vous ne souhaitez afficher qu'une seule fenêtre d'informations à la fois (comme c'est le cas sur Google Maps), vous n'avez besoin de créer qu'une seule fenêtre d'informations, que vous pouvez réaffecter à différents emplacements ou marqueurs lors d'événements cartographiques (tels que les clics d'utilisateurs).
Par conséquent, vous souhaiterez peut-être simplement créer l' InfoWindow
objet juste après avoir initialisé votre carte, puis gérer les click
gestionnaires d'événements 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, le InfoWindow
devrait se fermer automatiquement lorsque vous cliquez sur un nouveau marqueur sans avoir à appeler la close()
méthode.
Créez votre infowindow hors 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);
});
}
J'ai eu le même problème mais la meilleure réponse ne l'a pas complètement résolu, ce que j'avais à faire dans ma déclaration for était d'utiliser le this 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);
}
un peu tard, mais j'ai réussi à n'avoir qu'une seule infowindow ouverte 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);
Déclarez un globar var selectedInfoWindow;
et utilisez-le pour contenir la fenêtre d'informations 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);
});
Vous devez garder une trace de votre précédent objet InfoWindow et appeler la méthode close dessus lorsque vous gérez l'événement Click sur un nouveau marqueur .
NB Il n'est pas nécessaire d'appeler close sur l'objet de la fenêtre d'information partagée, appeler open avec un marqueur différent fermera automatiquement l'original. Voir la réponse de Daniel pour plus de détails.
close()
méthode, si un seul InfoWindow
objet est utilisé. Il se fermera automatiquement si la open()
méthode est à nouveau appelée sur le même objet.
Fondamentalement, vous voulez une fonction qui garde la référence à une new InfoBox()
=> déléguez l'événement onclick. Lors de la création de vos marqueurs (en boucle), utilisezbindInfoBox(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 attribué de façon asynchrone et conservé en mémoire. Chaque fois que vous appelezbindInfoBox()
la fonction return sera appelée à la place. Aussi pratique pour passer la infoBoxOptions
seule fois!
Dans mon exemple, j'ai dû ajouter un paramètre supplémentaire au map
car mon initialisation est retardée par les événements de l'onglet.
Voici une solution qui n'a pas besoin de créer une seule infoWindow pour la réutiliser. Vous pouvez continuer à créer de nombreuses infoWindows, la seule chose dont vous avez besoin est de créer une fonction closeAllInfoWindows et de l'appeler avant d'ouvrir une nouvelle infowindow. Donc, en gardant votre code, il vous suffit de:
Créer un tableau global pour stocker toutes les infoWindows
var infoWindows = [];
Stockez chaque nouvelle infoWindow dans le tableau, juste après infoWindow = new ...
infoWindows.push(infoWindow);
Créer la fonction closeAllInfoWindows
function closeAllInfoWindows() {
for (var i=0;i<infoWindows.length;i++) {
infoWindows[i].close();
}
}
Dans votre code, appelez closeAllInfoWindows () juste avant d'ouvrir le fichier infoWindow.
Cordialement,
Résolu de 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);
Google Maps vous permet de n'avoir qu'une seule fenêtre d'information ouverte. Donc, si vous ouvrez une nouvelle fenêtre, l'autre se ferme automatiquement.