¿Cómo configurar una ventana emergente en los marcadores con Google Maps API?

Question

Tengo este código donde visualizo y configuro todos mis marcadores. ¿Cómo puedo agregar una ventana emergente con información sobre marcadores con este código? Agrego la variable "i" en el texto, pero establece en todos los marcadores emergentes con "test - 723", donde 723 es el último valor de la variable "i". ¿Qué está mal?

for (var i = 0; i < arraylng.length-1; i++) { 
    var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(arraylng[i], arraylat[i]) 
    }); 
    var infowindow = new google.maps.InfoWindow({ 
    content: " " 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent('test: ' + i + ''); 
    infowindow.open(map, this); 
    }); 
    markers.push(marker); 
} 

Answer 1

Primero, cambie la condición de bucle a i < arraylng.length. En este momento no está capturando el último elemento de su matriz.

Las variables de JavaScript funcionan con el alcance de la función, por lo que debe llamar a una función para cada oyente de marcador para crear las referencias de variable correctas. Se puede utilizar una función anónima, as seen here, o definir una función para crear la escucha de clic:

Múltiples ventanas de información:

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

más probable es que no va a querer más de una ventana de información abiertos al mismo tiempo, porque es molesto tener que hacer clic en el cierre x. Después, sólo tendrá que un objeto ventana de información, y establecer el contenido como se hace clic en el marcador:

individual InfoWindow:

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

    for (var i = 0; i < arraylng.length-1; i++) { 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(arraylng[i], arraylat[i]), 
     map: map 
    }); 

    makeInfoWindowEvent(map, infowindow, "test" + i, marker); 

    markers.push(marker); 
    } 
} 

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

Answer 2

Eso es porque la variable i no se utiliza en el bucle, pero cuando se hace clic en el marcador - y luego i es igual al último índice + 1 ... El addListener es asincrónica, no síncrona.

Quite infowindow.setContent('test: ' + i + ''); y reemplace content: " " con content: 'test: ' + i. Esto debería solucionar tu problema.

Answer 3

var marker = new google.maps.Marker({ 
       position: myLatLng, 
       .... 
       content: point[4] 
      }); 
google.maps.event.addListener(marker, 'click', function() { 
      infowindow.setContent(this.content); 
      infowindow.open(map, this); 
      }); 

código dentro del bucle. Esto funcionó para mí perfectamente.