javascript - personalizar - Cierre todas las infowindows en Google Maps API v3

multiple infowindows google maps

Question

Estoy ocupado con un script que hará un lienzo de google maps en mi sitio web, con múltiples marcadores. Quiero que cuando haga clic en un marcador, se abra una ventana de información. Lo he hecho, y el código está en este momento:

 var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    function addMarker(map, address, title) {
     geocoder = new google.maps.Geocoder();
     geocoder.geocode( { ''address'': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
     position: results[0].geometry.location,
              map: map,
              title:title
    });
    google.maps.event.addListener(marker, ''click'', function() {
     var infowindow = new google.maps.InfoWindow();
            infowindow.setContent(''<strong>''+title + ''</strong><br />'' + address);
             infowindow.open(map, marker);

          });
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
     });
    }
    addMarker(map, ''Address'', ''Title'');
 addMarker(map, ''Address'', ''Title'');

Esto funciona al 100%. Pero ahora quiero que cuando una ventana de información esté abierta y usted quiera abrir la segunda, la primera se cierre automáticamente. Pero no he encontrado una manera de hacer eso. infowindow.close (); no ayuda ¿Alguien tiene un ejemplo o una solución a este problema?

Answer 1

¡He pasado una hora con dolor de cabeza tratando de cerrar la ventana de información! Mi opción final (y funcional) ha sido cerrar la ventana de información con un SetTimeout (unos segundos) No es la mejor manera ... pero funciona con facilidad

    marker.addListener(''click'', function() {
    infowindow.setContent(html);
    infowindow.open(map, this);

    setTimeout(function(){
        infowindow.close();
    },5000);

});

Answer 2

Cuando se trata de grupos de marcadores, este me funcionó.

var infowindow = null;

google.maps.event.addListener(marker, "click", function () {

        if (infowindow) {
            infowindow.close();
        }
        var markerMap = this.getMap();
        infowindow = this.info;
        this.info.open(markerMap, this);


    });

Answer 3

Debería hacer clic en su mapa - $(''#map-selector'').click();

Answer 4

Declarar variables globales:

var mapOptions;
var map;
var infowindow;
var marker;
var contentString;
var image;

intialize use el método addEvent del mapa:

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

Answer 5

Para bucles que crean infowindows dinámicamente, declare una variable global

var openwindow;

y luego en la llamada a la función addListener (que está dentro del ciclo):

google.maps.event.addListener(marker<?php echo $id; ?>, ''click'', function() {
if(openwindow){
    eval(openwindow).close();
}
openwindow="myInfoWindow<?php echo $id; ?>";
myInfoWindow<?php echo $id; ?>.open(map, marker<?php echo $id; ?>);
});

Answer 6

Te animo a probar el complemento goMap jQuery cuando goMap con Google Maps. Para este tipo de situación, puede configurar hideByClick en true al crear marcadores:

$(function() { 
    $("#map").goMap({ 
        markers: [{  
            latitude: 56.948813, 
            longitude: 24.704004, 
            html: { 
                content: ''Click to marker'', 
                popup:true 
            } 
        },{  
            latitude: 54.948813, 
            longitude: 21.704004, 
            html: ''Hello!'' 
        }], 
        hideByClick: true 
    }); 
}); 

Este es solo un ejemplo, tiene muchas características para ofrecer, como marcadores de agrupación y manipulación de ventanas de información.

Answer 7

Tenía un bucle dinámico que creaba infowindows y marcadores en función de cuántos infowindows en el CMS, por lo que no quería crear un InfoWindow() en cada evento, hacer clic y atascarlo con las solicitudes, si es que alguna vez surgió . En cambio, traté de saber cuál infowindow variable de infowindow específica para cada instancia fuera de la cantidad establecida de ubicaciones que tenía, y luego solicité a Maps que las cerrara antes de que abriera la correcta.

Mi conjunto de ubicaciones se llamaba ubicaciones, por lo que el PHP que configuré antes de la inicialización de mapas para obtener mis nombres de variables de infowindow fue:

for($k = 0; $k < count($locations); $k++) {
        $infowindows[] = ''infowindow'' . $k; 
} 

Luego, después de inicializar el mapa y demás, en el script tenía un bucle foreach PHP que creaba las ventanas de información dinámica usando un contador:

//...javascript map initilization
<?php 
$i=0;
foreach($locations as $location) {

    ..//get latitudes, longitude, image, etc...

echo ''var mapMarker'' . $i . '' = new google.maps.Marker({
          position: myLatLng'' . $i . '',
          map: map,
          icon: image
      });'';

echo ''var contentString'' . $i . '' = "<h1>'' . $title[$i] . ''</h1><h2>'' . $address[$i] . ''</h2>'' . $content[$i] .         ''";''; 
echo ''infowindow'' . $i . '' = new google.maps.InfoWindow({ '';
echo ''    content: contentString'' . $i . ''
          });'';

echo ''google.maps.event.addListener(mapMarker'' . $i . '', "click", function() { '';   
    foreach($infowindows as $window) {  
        echo $window . ''.close();''; 
    }
        echo ''infowindow'' . $i . ''.open(map,mapMarker''. $i . '');
      });'';

$i++; 
}
?>
...//continue with Maps script... 

Entonces, el punto es que antes de llamar a todo el script del mapa, tenía una matriz con los nombres que sabía que iban a salir cuando se creó InfoWindow() , como infowindow0, infowindow1, infowindow2, etc...

Luego, en el evento click para cada marcador, el ciclo foreach pasa y dice cerrar todos antes de seguir con el siguiente paso para abrirlos. Resulta que se ve así:

google.maps.event.addListener(mapMarker0, "click", function() {
    infowindow0.close();
    infowindow1.close();
    infowindow2.close();
    infowindow0.open(map,mapMarker0);
}

Supongo que es una manera diferente de hacer las cosas ... pero espero que ayude a alguien.

Answer 8

Tengo algo como lo siguiente

function initMap()
{
    //...create new map here
    var infowindow;
    $(''.business'').each(function(el){
        //...get lat/lng
        var position = new google.maps.LatLng(lat, lng);
        var content = "contents go here";
        var title = "titleText";
        var openWindowFn;
        var closure = function(content, position){.
            openWindowFn = function()
            {
                if (infowindow)
                {
                    infowindow.close();
                }
                infowindow = new google.maps.InfoWindow({
                    position:position,
                    content:content
                });
                infowindow.open(map, marker);
            }
        }(content, position);
        var marker = new google.maps.Marker({
            position:position,
            map:map,
            title:title.
        });
        google.maps.event.addListener(marker, ''click'', openWindowFn);
    }
}

Según entiendo, usar un cierre como ese permite capturar variables y sus valores en el momento de la declaración de la función, en lugar de depender de variables globales. Entonces, cuando se llama a openWindowFn más tarde, en el primer marcador, por ejemplo, el content y la variable de position tienen los valores que hicieron durante la primera iteración en la función each() .

No estoy seguro de cómo openWindowFn tiene infowindow en su alcance. Tampoco estoy seguro de estar haciendo las cosas bien, pero funciona, incluso con múltiples mapas en una página (cada mapa tiene una ventana abierta).

Si alguien tiene alguna idea, por favor comente.

Answer 9

Tengo una muestra de mi código que quizás pueda ayudar. Había establecido solo un objeto infowindow en alcance global. Luego use setContent () para establecer el contenido antes de mostrarlo.

  let map;
  let infowindow;
  let dataArr = [
    {
      pos:{lat: -34.397, lng: 150.644},
      content: ''First marker''
    },
    {
      pos:{lat: -34.340, lng: 150.415},
      content: ''Second marker''
    }
  ];

  function initMap() {
    map = new google.maps.Map(document.getElementById(''map''), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
    // Set infowindow object to global varible
    infowindow = new google.maps.InfoWindow();
    loadMarker();
  }

  function loadMarker(){
    dataArr.forEach((obj, i)=>{
      let marker = new google.maps.Marker({
        position: obj.pos,
        map: map
      });
      marker.addListener(''click'', function() {
        infowindow.close()
        infowindow.setContent(`<div> ${obj.content} </div>`)
        infowindow.open(map, marker);
      });
    })
  }

Answer 10

infowindow es una variable local y la ventana no está disponible en el momento de close ()

var latlng = new google.maps.LatLng(-34.397, 150.644);
var infowindow = null;

...

google.maps.event.addListener(marker, ''click'', function() {
    if (infowindow) {
        infowindow.close();
    }
    infowindow = new google.maps.InfoWindow();
    ...
});
...