javascript - style - infowindow google maps v3

Tener solo una ventana de información abierta en Google Maps API v3

Question

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.

¿Puede alguien mostrarme cómo hacer esto?

Answer 1

Aquí hay una solución que no necesita crear solo una ventana de información para reutilizarla. Puede seguir creando muchas ventanas de información, 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:

1. Crea una matriz global para almacenar toda la informaciónWindows

   var infoWindows = [];

2. Almacene cada nueva ventana de información en la matriz, justo después de la ventana de información = nueva ...

   infoWindows.push(infoWindow);

3. Crear la función closeAllInfoWindows

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

4. En su código, llame a closeAllInfoWindows () justo antes de abrir la ventana de información.

Saludos,

Answer 2

Básicamente, desea una función que mantenga la referencia a un new InfoBox() => delegar el evento onclick. Mientras crea sus marcadores (en un bucle) use 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 se asigna de forma asincrónica y se guarda en la memoria. Cada vez que llame a bindInfoBox() se llamará a la función de retorno en su lugar. ¡También es útil para pasar infoBoxOptions solo una vez!

En mi ejemplo, he tenido que agregar un parámetro extra al map ya que mi inicialización se ve demorada por eventos de tabulación.

InfoBoxOptions

Answer 3

Cree su ventana de información fuera del alcance para que pueda compartirla.

Aquí hay un ejemplo 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 4

Declare un globar var selectedInfoWindow; y utilízalo 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);
});

Answer 5

Google Maps le permite tener solo una ventana de información abierta. Entonces, si abre una nueva ventana, la otra se cierra automáticamente.

Answer 6

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

Answer 7

Tuve el mismo problema, pero la mejor respuesta no lo resolvió completamente, lo que tenía que hacer en mi declaración fue usar esto relacionado con mi marcador actual. Tal vez 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);                 
}

Answer 8

un poco tarde, pero logré tener solo una ventana de información abierta por maken infowindow una variable global.

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

entonces dentro del listner

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

infowindow.open(map, this);

Answer 9

InfoWindow realizar un seguimiento de su objeto InfoWindow anterior y llamar al método close cuando maneje el evento click en un marcador nuevo .

NB : no es necesario cerrar el objeto de la ventana de información compartida, la llamada abierta con un marcador diferente cerrará automáticamente el original. Ver la respuesta de Daniel para más detalles.

Answer 10

Necesita crear solo un objeto InfoWindow , mantener una referencia al mismo y reutilizarlo para todos los marcadores. Citando de Google Maps API Docs :

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 sobre los eventos del mapa (como los clics del usuario).

Por lo tanto, puede simplemente querer crear el objeto InfoWindow justo después de inicializar su mapa, y luego manejar los manejadores de eventos click de sus marcadores de la siguiente manera. Digamos que tienes un marcador llamado someMarker :

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

Entonces InfoWindow se cerrará automáticamente cuando haga clic en un marcador nuevo sin tener que llamar al método close() .