javascript - georreferenciación - google maps api key gratis

Google Maps: cerrar automáticamente abrir InfoWindows?

Question

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 ícono de cerrar. Es decir, puede tener 2+ InfoWindows abiertas a la vez si coloca el cursor sobre el marcador del mapa.

Pregunta : ¿Cómo lo hago para que solo el InfoWindow activo actual esté abierto y todas las demás InfoWindows estén cerradas? Es decir, ¿no se abrirán más de 1 InfoWindow a la vez?

Answer 1

Almacenaba una variable en la parte superior para mantener un registro de la ventana de información actualmente abierta, ver debajo.

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

Answer 2

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

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

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

Answer 3

Hay una función close() para InfoWindows. Simplemente haga 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ás buscando. Lo encontré en la galería de demostración de Maps API V3 .

Answer 4

Hay una manera más fácil además de usar la función close (). si crea una variable con la propiedad de 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);
    });
}

Answer 5

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

Answer 6

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 puedes pasar el cursor sobre él y se cerrará solo.

Answer 7

solución alternativa para esto con el uso de muchas ventanas de información: guarde la ventana de información previa 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);
    });
}

Answer 8

//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 hacia cada marcador en el que se haga clic, cerrándose de hecho, luego volviendo a abrir (y panoramizando para que se ajuste 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.

Answer 9

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

Answer 10

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();
        };
        ...
    }
}