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

Question

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

¿Hay alguna forma de 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 depende de los marcadores, por lo que cuando se hace clic en un marcador, el contenido de la página tiene que cambiar dependiendo de qué marcador se hizo clic.Me gustaría almacenar y recuperar los datos personalizados una vez que se hace clic en un marcador sucesivamente.

Gracias

102

google-maps-api-3 google-maps google-maps-markers

Author: Abid, 2012-07-08

Source

2 answers

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

14

Author: geocodezip,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-07-07 20:53:14

score 185 · Accepted Answer

Como un marcador de Google es un objeto JavaScript, puede agregar información personalizada en el formulario key: value, donde key es una cadena válida. Se llaman propiedades del objeto y se pueden abordar de muchas maneras 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 simples: en la declaración, la notación de puntos y los 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 una manera similar:

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