varios - Agregar múltiples marcadores con infowindows(Google Maps API)

multiples marcadores con infowindow

Question

Actualmente estoy usando el siguiente código para colocar marcadores múltiples en un mapa de Google usando su API.

El problema que tengo es que varias ventanas de información no funcionan (solo muestra la última).

Hay un montón de preguntas como la mía aquí en SO. En realidad, haz una gran cantidad de preguntas :-)

Solo un ejemplo: tratando de vincular múltiples InfoWindows a múltiples Marcadores en un Mapa de Google y fallando

La solución a mi problema es bastante fácil: simplemente encierre el oyente click en una función (anónima).

Sin embargo, lo que no entiendo es por qué mi solución no funciona (guardando los marcadores e infowindows en matrices en lugar de solo una variable).

    var markers = [];
    var infowindows = [];

    // add shops or malls
    for (var key in data.markers) {
      if (data.markers.hasOwnProperty(key)) {
        infowindows[key] = new google.maps.InfoWindow({
            content: data.markers[key].infowindow
        });

        markers[key] = new google.maps.Marker({
                position: new google.maps.LatLng(data.markers[key].location.lat, data.markers[key].location.lng),
                map: map,
                flat: true,
                title: data.markers[key].name,
                draggable: false
        });
        var iconFile = ''http://maps.google.com/mapfiles/ms/icons/''+marker_color+''-dot.png'';
        markers[key].setIcon(iconFile);

        google.maps.event.addListener(markers[key], ''click'', function() {
          infowindows[key].open(map, markers[key]);
        });
      }
    }

Así que ... No sé qué hacer para obtener la solución de cómo hacerlo funcionar con alguna función para encerrar al oyente (aunque debería funcionar, aún no lo he probado, pero lo haré), pero quiero saber el motivo por el cual no funcionaría si agrego los marcadores e infowindows a las matrices en su lugar.

Answer 1

¡Esto funciona bien para mi! Simplemente agregue una nueva propiedad al objeto marcador, esta propiedad contiene el objeto infowindow.

var mytext = ''Infowindow contents in HTML''
var myinfowindow = new google.maps.InfoWindow({
    content: mytext
});

var marker = new google.maps.Marker({
    position: mypos,
    map: mymap,
    icon: myicon,
    title: mytitle,
    infowindow: myinfowindow
});

google.maps.event.addListener(marker, ''click'', function() {
        this.infowindow.open(map, this);

});

Answer 2

Hay una forma un poco más simple de lograr esto. puede agregar un atributo personalizado a su marcador (el índice de la ventana de información) y referirse a él en la función de devolución de llamada. Ejemplo a continuación:

    markers = Array();
    infoWindows = Array();

    for(var i in earthquakes)
    {
        var location = new google.maps.LatLng(earthquakes[i].geolat, earthquakes[i].geolong);
        var marker = new google.maps.Marker({
            position : location,
            map : map,
            animation : google.maps.Animation.DROP,
            infoWindowIndex : i //<---Thats the extra attribute
        });
        var content = "<h3>" + earthquakes[i].title + "<h3>" +
                "<a data-ajax=''false'' target=''_blank'' href=''" + earthquakes[i].link + "''>Link to shakemap.</a>";
        var infoWindow = new google.maps.InfoWindow({
            content : content
        });

        google.maps.event.addListener(marker, ''click'', 
            function(event)
            {
                map.panTo(event.latLng);
                map.setZoom(5);
                infoWindows[this.infoWindowIndex].open(map, this);
            }
        );

        infoWindows.push(infoWindow);
        markers.push(marker);
    }

Answer 3

Javascript tiene una estructura de lenguaje llamada "cierres". Los cierres son funciones (como la función () {} que declaras arriba para tratar con el oyente click) que capturan referencias a variables externas.

Hay muchos recursos que los explican mejor que yo, y sugiero que consulten, pero este es mi mejor intento:

En este bloque aquí:

    google.maps.event.addListener(markers[key], ''click'', function() {
      infowindows[key].open(map, markers[key]);
    });

Como "clave" ya está definida como una variable externa, la función capturará una referencia a esa variable. Entonces, donde esperas:

infowindows["helloworld"]

Javascript interpretará esto como:

infowindows[reference to key]

Cuando haces clic en un marcador, busca "referencia a la clave" para ver cuál es el valor actual de la clave. Debido a que esto probablemente no ocurra hasta que su ciclo haya finalizado, la clave será igual a la última clave en su objeto data.markers. Y será igual a ese valor para CADA clic en el oyente que haya agregado.

La solución, como usted señala, es ajustar esto en una función anónima para obtener Javascript y evaluar el valor de "clave" en el momento en que se agrega el oyente clic.

  google.maps.event.addListener(markers[key], ''click'', function(innerKey) {
      return function() {
          infowindows[innerKey].open(map, markers[innerKey]);
      }
    }(key));

Answer 4

Usaré el cierre:

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

Answer 5

This es una buena explicación con la solución con la página de demostración.

This es la página de demostración.

Answer 6

    function addMarker(Latlng){ 
       marker = new google.maps.Marker({
            position: Latlng,
            icon:"myicon.jpg",
            map: map,
            animation: google.maps.Animation.DROP,
            title:"My tooltip"
        });

        //add marker
        marker.setMap(map);

        contentString = "<h1>Hello World</h1>";

        marker.infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        //add click event
        google.maps.event.addListener(marker, ''click'', function(){
            this.infowindow.open(map,this);
        });
    }

    addMarker(some_lat_lang_value);

Answer 7

var infowindow = null;
infowindow = new google.maps.InfoWindow({
  content: "loading..."
});
for (i = 0; i < data.dbreturn.length; i++) { 
  var latilongi = data.dbreturn[i].mapa.split('','');
  var mapinha =  {lat: parseFloat(latilongi[''0'']), lng:     parseFloat(latilongi[''1''])};
  var marker = new google.maps.Marker({
  position: mapinha,
  html: ''<div id="content"><h5 id="firstHeading"     class="firstHeading">''+data.dbreturn[i].nome+''</h5></div>''
});

google.maps.event.addListener(marker, "click", function () {
  infowindow.setContent(this.html);
  infowindow.open(map, this);
});
}