Google Map API V3: Cómo agregar datos personalizados a los marcadores


117

¿Hay alguna forma de que pueda agregar información personalizada a mis marcadores para su uso posterior? Hay formas de tener una ventana de información y un título, pero ¿qué pasa si quiero asociar el marcador con otra información?

Tengo otras cosas que se muestran en la página que dependen de los marcadores, por lo que cuando se hace clic en un marcador, el contenido de la página debe cambiar según el marcador en el que se hizo clic.Me gustaría almacenar y recuperar los datos personalizados una vez que se hace clic en un marcador. hizo clic, etc.

Gracias

Respuestas:


214

Como un marcador de Google es un objeto de JavaScript, puede agregar información personalizada en el formulario key: value, donde la clave es una cadena válida. Se denominan propiedades de objeto y se pueden abordar de muchas formas diferentes. El valor puede ser cualquier cosa legal, tan simple como números o cadenas, y también funciones, o incluso otros objetos. Tres formas sencillas: en la declaración, notación de puntos y corchetes

var markerA = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(0, 0),
    customInfo: "Marker A"
});

var markerB = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(-10, 0)
});
markerB.customInfo = "Marker B";

var markerC = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(-20, 0)
});
markerC['customInfo'] = "Marker C";

Luego, para recuperarlo de manera similar:

google.maps.event.addListener(markerA, 'click', function() {
    alert(this.customInfo);
});

3
No hay nada en la documentación que formalice este patrón. Esperamos que lo hagan en lugar de romperlo en una versión posterior.
Adam

1
La propiedad 'customInfo' no existe en el tipo 'Marker'.
alehn96

1
Si está utilizando mecanografiado, es posible que desee utilizar los corchetes en lugar del punto para asignar tales propiedades
Cocoduf

14

Puede agregar sus propias propiedades personalizadas a los marcadores (solo tenga cuidado de no entrar en conflicto con las propiedades de la API).

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.