javascript - marcar - Obtener el elemento DOM de un marcador en Google Maps API 3

infowindow google maps v3

Question

Estoy tratando de encontrar una manera de obtener el elemento DOM de un marcador. Parece que Google usa diferentes elementos para mostrar un marcador y uno para manejar el evento.

He descubierto 2 cosas hasta ahora. Existe una variable llamada fb que contiene el elemento DOM en un objeto marcador, pero creo que la próxima vez que Google actualice la API, se llamará algo diferente. Así que no te vayas.

En segundo lugar, si se adjunta un evento de clic a un marcador, la API envía el elemento DOM del evento como argumentos a la función que haya especificado. Mientras miro a través de Firebug, no puedo encontrar ninguna relación entre los dos.

Lo que estoy tratando de lograr es manipular el elemento DOM () y proporcionarle más información que un elemento ''div'' con un fondo.

He hecho esto en la versión 2 usando una propiedad de nombre (no documentada) que genera una identificación en el elemento div.

¿Alguien tiene alguna idea?

Answer 1

1. Personalice las superposiciones (implementando onAdd, draw, remove) mientras arrastra tiene algunos problemas.
2. Tal vez usted puede obtener el elemento dom marcador por el nombre de clase gmnoprint y el índice en el que se ha agregado.

Answer 2

He encontrado que este método es útil, aunque podría no ser adecuado para todos los entornos. Al configurar la imagen del marcador, agregue un anclaje único a la URL. Por ejemplo:

// Create the icon
var icon = new google.maps.MarkerImage(
    "data/ui/marker.png",
    new google.maps.Size(64, 64),
    new google.maps.Point(0,0),
    new google.maps.Point(48, 32)
);

// Determine a unique id somehow, perhaps from your data
var markerId = Math.floor(Math.random() * 1000000);
icon.url += "#" + markerId;

// Set up options for the marker
var marker = new google.maps.Marker({
    map: map,
    optimized: false,
    icon: icon,
    id: markerId,
    uniqueSrc: icon.url
});

Ahora tienes un selector único, es decir:

$("img[src=''data/ui/marker.png#619299'']")

o si tienes el marcador:

$("img[src=''" + marker.uniqueSrc + "'']")

Answer 3

He encontrado una muy mala solución. Uno puede usar el atributo de título para pasar una propiedad de identificación.

fixMarkerId = function () {
                $(''div[title^="mtg_"]'').each(function (index, elem) {
                    el = $(elem);
                    el.attr(''id'', el.attr(''title''));
                    el.removeAttr(''title'');
                });
            },
            tryAgainFixMarkerId = function () {
                if ($(''div[title^="mtg_"]'').length) {
                    fixMarkerId();
                } else {
                    setTimeout(function () {
                        tryAgainFixMarkerId();
                    }, 100);
                };
            }

if ($(''div[title^="mtg_"]'').length) {
                fixMarkerId();
            } else {
                setTimeout(function () {
                    tryAgainFixMarkerId();
                }, 100);
            };

Yo no recomendaría esta solución para cualquier entorno de producción. Pero por ahora lo uso para poder seguir desarrollando. Pero sigue buscando una mejor solución.

Answer 4

También estaba buscando el elemento DOM para implementar una información sobre herramientas personalizada. Después de un tiempo investigando las superposiciones de Google, las bibliotecas personalizadas, etc., terminé con la siguiente solución basada en el enfoque del título de fredrik (utilizando jQuery):

google.maps.event.addListener(marker, ''mouseover'', function() { if (!this.hovercardInitialized) { var markerInDOM = $(''div[title="'' + this.title + ''"]'').get(0); // do whatever you want with the DOM element this.hovercardInitialized = true; } });

Espero que esto ayude a alguien.