Necesito tener solo una ventana de información abierta en mi mapa de Google. Necesito cerrar todas las demás InfoWindows antes de abrir una nueva.
¿Alguien puede mostrarme cómo hacer esto?
Respuestas:
Necesita crear un solo InfoWindow
objeto, mantener una referencia a él y reutilizarlo para todos los marcadores. Citando los documentos de la API de Google Maps :
Si solo desea que se muestre una ventana de información a la vez (como es el comportamiento en Google Maps), solo necesita crear una ventana de información, que puede reasignar a diferentes ubicaciones o marcadores en eventos del mapa (como los clics del usuario).
Por lo tanto, puede simplemente querer crear el InfoWindow
objeto justo después de inicializar su mapa y luego manejar los click
controladores de eventos de sus marcadores de la siguiente manera. Digamos que tiene un marcador llamado someMarker
:
google.maps.event.addListener(someMarker, 'click', function() {
infowindow.setContent('Hello World');
infowindow.open(map, this);
});
Luego, InfoWindow
debería cerrarse automáticamente al hacer clic en un nuevo marcador sin tener que llamar al close()
método.
Cree su ventana de información fuera del alcance para poder compartirla.
He aquí un ejemplo sencillo:
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);
});
}
Tuve el mismo problema, pero la mejor respuesta no lo resolvió por completo, lo que tenía que hacer en mi declaración for era usar esto relacionado con mi marcador actual. Quizás esto ayude a alguien.
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 poco tarde, pero me las arreglé para tener solo una ventana de información abierta al hacer de la ventana de información una variable global.
var infowindow = new google.maps.InfoWindow({});
luego dentro del listner
infowindow.close();
infowindow = new google.maps.InfoWindow({
content: '<h1>'+arrondissement+'</h1>'+ gemeentesFiltered
});
infowindow.open(map, this);
Declare una barra global var selectedInfoWindow;
y úsela para mantener la ventana de información abierta:
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);
});
Debe realizar un seguimiento de su objeto InfoWindow anterior y llamar al método de cierre cuando maneja el evento de clic en un nuevo marcador .
NB: No es necesario llamar a cerrar en el objeto de la ventana de información compartida, llamar a abrir con un marcador diferente cerrará automáticamente el original. Vea la respuesta de Daniel para más detalles.
close()
método, si InfoWindow
se usa un solo objeto. Se cerrará automáticamente si open()
se vuelve a llamar al método en el mismo objeto.
Básicamente, desea una función que mantenga la referencia a uno new InfoBox()
=> delegar el evento onclick. Mientras crea sus marcadores (en un bucle) usebindInfoBox(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
se asigna de forma asincrónica y se guarda en la memoria. Cada vez que llame, se llamará a bindInfoBox()
la función de retorno. También es útil para pasar elinfoBoxOptions
solo una vez!
En mi ejemplo, tuve que agregar un parámetro adicional al map
ya que mi inicialización se retrasa por eventos de pestaña.
Aquí hay una solución que no necesita crear solo una ventana de información para reutilizarla. Puede continuar creando muchas infoWindows, lo único que necesita es crear una función closeAllInfoWindows y llamarla antes de abrir una nueva ventana de información. Entonces, manteniendo su código, solo necesita:
Cree una matriz global para almacenar toda la información de Windows
var infoWindows = [];
Almacene cada nueva ventana de información en la matriz, justo después de la ventana de información = nueva ...
infoWindows.push(infoWindow);
Crear la función closeAllInfoWindows
function closeAllInfoWindows() {
for (var i=0;i<infoWindows.length;i++) {
infoWindows[i].close();
}
}
En su código, llame a closeAllInfoWindows () justo antes de abrir la ventana de información.
Saludos,
Lo resolvió de esta manera:
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 le permite tener solo una ventana de información abierta. Entonces, si abre una nueva ventana, la otra se cierra automáticamente.