Google Maps: ¿Cerrar automáticamente las ventanas de información abiertas?


108

En mi sitio , estoy usando Google Maps API v3 para colocar marcadores de casas en el mapa.

Las ventanas de información permanecen abiertas a menos que haga clic explícitamente en el icono de cierre. Es decir, puede tener más de 2 InfoWindows abiertas a la vez si se desplaza sobre el marcador del mapa.

Pregunta : ¿Cómo hago para que solo la ventana de información activa actual esté abierta y todas las demás ventanas de información estén cerradas? Es decir, ¿no se abrirá más de 1 InfoWindow a la vez?


1
En cuanto a mí, es mejor crear solo una ventana de información y actualizarla (su contenido, etc.), abrir y cerrar y todo. Pero estoy bastante seguro de que este enfoque no siempre es aplicable.
andrii

Respuestas:


153

Hay una función close () para InfoWindows. Simplemente realice un seguimiento de la última ventana abierta y llame a la función de cierre cuando se cree una nueva ventana.

Esta demostración tiene la funcionalidad que está buscando. Lo encontré en la galería de demostración de Maps API V3 .


4
Votó a favor de la sugerencia de realizar un seguimiento de la última ventana abierta únicamente. Parece una obviedad, pero la gente olvida esas cosas ...
Rémi Breton

1
Acabo de usar exactamente la misma técnica. Gracias Chris. Fue necesario para mí, porque estoy usando una matriz de objetos InfoWindow en lugar de solo uno que recorre y toma la información pertinente. Cada InfoWindow tiene su propia información de actualización por separado, por lo que encontré esta técnica bastante útil.
InterfaceGuy

2
el enlace "esta demostración" está roto
Brendan Whiting

64

solución alternativa para esto con el uso de muchas ventanas de información: guarde la ventana de información anterior abierta en una variable y luego ciérrela cuando se abra una nueva ventana

var prev_infowindow =false; 
...
base.attachInfo = function(marker, i){
    var infowindow = new google.maps.InfoWindow({
        content: 'yourmarkerinfocontent'
    });

    google.maps.event.addListener(marker, 'click', function(){
        if( prev_infowindow ) {
           prev_infowindow.close();
        }

        prev_infowindow = infowindow;
        infowindow.open(base.map, marker);
    });
}

3
Como éste. Simple de entender e implementar
Aamir Afridi

6
Perdona mi ingenuidad, pero ¿WTF es básico?
wordsforthewise

No entiendo por qué no es el comportamiento predeterminado en Google Maps V3 ...
Mr Washington

La mejor y más sencilla solución que he encontrado hasta ahora. ¡gracias!
Irteza Asad

27
//assuming you have a map called 'map'
var infowindow = new google.maps.InfoWindow();

var latlng1 = new google.maps.LatLng(0,0);
var marker1 = new google.maps.Marker({position:latlng1, map:map});
google.maps.event.addListener(marker1, 'click',
    function(){
        infowindow.close();//hide the infowindow
        infowindow.setContent('Marker #1');//update the content for this marker
        infowindow.open(map, marker1);//"move" the info window to the clicked marker and open it
    }
);
var latlng2 = new google.maps.LatLng(10,10);
var marker2 = new google.maps.Marker({position:latlng2, map:map});
google.maps.event.addListener(marker2, 'click',
    function(){
        infowindow.close();//hide the infowindow
        infowindow.setContent('Marker #2');//update the content for this marker
        infowindow.open(map, marker2);//"move" the info window to the clicked marker and open it
    }
);

Esto "moverá" la ventana de información alrededor de cada marcador en el que se hizo clic, de hecho se cerrará y luego se volverá a abrir (y se desplazará para adaptarse a la ventana gráfica) en su nueva ubicación. Cambia su contenido antes de abrir para dar el efecto deseado. Funciona para n marcadores.


1
Nota rápida: las llamadas repetidas a infowindow.open () son suficientes; no es necesario cerrar la ventana primero.
Eric Nguyen

3
@Eric, aunque técnicamente tienes razón, he notado un error que a veces hace que las ventanas de información aparezcan en su última posición. Forzar el cierre primero derrota a dicho error.
Joel Mellon

22

Mi solución.

var map;
var infowindow = new google.maps.InfoWindow();
...
function createMarker(...) {
var marker = new google.maps.Marker({
     ...,
     descrip: infowindowHtmlContent  
});
google.maps.event.addListener(marker, 'click', function() {
    infowindow.setOptions({
        content: this.descrip,
        maxWidth:300
    });
    infowindow.open(map, marker);
});

3
Eso es realmente elegante: usar una única ventana de información y cambiar el contenido evita tener que hacer un seguimiento de / cerrar la anterior.
Nick F

Esta solución es muy elegante y funciona de maravilla. +1
Sebastian Breit

9

Desde este enlace http://www.svennerberg.com/2009/09/google-maps-api-3-infowindows/ :

Teo: La forma más fácil de hacer esto es tener solo una instancia del objeto InfoWindow que reutilizará una y otra vez. De esa manera, cuando hace clic en un nuevo marcador, la ventana de información se "mueve" desde donde se encuentra actualmente, para apuntar al nuevo marcador.

Utilice su método setContent para cargarlo con el contenido correcto.


No creo que esto se aplique ya que estoy usando la API de Google Maps v3
Ted

Además, el artículo que vinculó tampoco muestra más de 1 marcador
Ted

He usado una única ventana de información de la misma manera para varios sitios. Haga clic en uno, el abierto se cierra automáticamente.
Keith Adler

4
¿Cómo asocia varias marcas con una sola ventana de información?
Ted

7

Declarar una variable para ventana activa

var activeInfoWindow; 

y enlazar este código en el detector de marcadores

 marker.addListener('click', function () {
    if (activeInfoWindow) { activeInfoWindow.close();}
    infowindow.open(map, marker);
    activeInfoWindow = infowindow;
});

Gracias, realmente funciona cuando se hace clic en cualquier parte del mapa.
Varinder Singh Baidwan

Saludos amigo, de todas las sugerencias, esto funcionó mejor para mí y es AF limpio.
Matthew Ellis

4

Hay una forma más sencilla además de usar la función close (). si crea una variable con la propiedad InfoWindow, se cierra automáticamente cuando abre otra.

var info_window;
var map;
var chicago = new google.maps.LatLng(33.84659, -84.35686);

function initialize() {
    var mapOptions = {
        center: chicago,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    info_window = new google.maps.InfoWindow({
        content: 'loading'
    )};

createLocationOnMap('Location Name 1', new google.maps.LatLng(33.84659, -84.35686), '<p><strong>Location Name 1</strong><br/>Address 1</p>');
createLocationOnMap('Location Name 2', new google.maps.LatLng(33.84625, -84.36212), '<p><strong>Location Name 1</strong><br/>Address 2</p>');

}

function createLocationOnMap(titulo, posicao, conteudo) {            
    var m = new google.maps.Marker({
        map: map,
        animation: google.maps.Animation.DROP,
        title: titulo,
        position: posicao,
        html: conteudo
    });            

    google.maps.event.addListener(m, 'click', function () {                
        info_window.setContent(this.html);
        info_window.open(map, this);
    });
}

1
var map;
var infowindow;
...
function createMarker(...) {
    var marker = new google.maps.Marker({...});
    google.maps.event.addListener(marker, 'click', function() {
        ...
        if (infowindow) {
            infowindow.close();
        };
        infowindow = new google.maps.InfoWindow({
            content: contentString,
            maxWidth: 300
        });
        infowindow.open(map, marker);
    }
...
function initialize() {
    ...
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    ...
    google.maps.event.addListener(map, 'click', function(event) {
        if (infowindow) {
            infowindow.close();
        };
        ...
    }
}

Gracias, necesitaba cerrar la ventana de información cuando no hacía clic en un marcador, así que solo en el mapa
VRC

1

Qué tal si -

google.maps.event.addListener(yourMarker, 'mouseover', function () {
        yourInfoWindow.open(yourMap, yourMarker);

    });

google.maps.event.addListener(yourMarker, 'mouseout', function () {
        yourInfoWindow.open(yourMap, yourMarker);

    });

Luego, simplemente puede colocar el cursor sobre él y se cerrará solo.


Esta es una solución alternativa interesante, pero no responde a la pregunta y no funcionaría en dispositivos solo táctiles.
Lee

1

Guardé una variable en la parte superior para realizar un seguimiento de qué ventana de información está abierta actualmente, ver más abajo.

var currentInfoWin = null;
google.maps.event.addListener(markers[counter], 'click', function() {      
    if (currentInfoWin !== null) {
        currentInfoWin.close(map, this); 
    }
    this.infoWin.open(map, this); 
    currentInfoWin = this.infoWin;  
}); 

¿Qué está haciendo [contador] aquí?
Lee

0

Esto es lo que usé si está usando muchos marcadores en un bucle for (Django aquí). Puede establecer un índice en cada marcador y establecer ese índice cada vez que abre una ventana. Cerrar el índice guardado anteriormente:

markers = Array();
infoWindows = Array();
var prev_infowindow =false;
{% for obj in objects %}
var contentString = 'your content'
var infowindow = new google.maps.InfoWindow({
            content: contentString,
          });
var marker = new google.maps.Marker({
               position: {lat: {{ obj.lat }}, lng: {{ obj.lon }}},
               map: map,
               title: '{{ obj.name }}',
               infoWindowIndex : {{ forloop.counter0 }}
          });
google.maps.event.addListener(marker, 'click',
            function(event)
            {
           if( prev_infowindow ) {
               infoWindows[prev_infowindow].close();
                }
                prev_infowindow = this.infoWindowIndex;
                infoWindows[this.infoWindowIndex].open(map, this);
            }
        );

        infoWindows.push(infowindow);
        markers.push(marker);

      {% endfor %}

-1
var contentString = "Location: " + results[1].formatted_address;    
google.maps.event.addListener(marker,'click', (function(){ 
    infowindow.close();
    infowindow = new google.maps.InfoWindow({
        content: contentString
    });
    infowindow.open(map, marker);
}));
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.