Obtiene el elemento DOM de un marcador en Google Maps API 3

Question

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

He descubierto 2 cosas hasta ahora. Hay una variable generada 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 vayas.

En segundo lugar, si adjuntamos un evento de clic a un marcador, la API enviará el elemento DOM del evento como argumentos a la función que haya especificado. Mientras lo miro en Firebug no puedo encontrar ninguna relación entre los dos.

Lo que trato de hacer es manipular el elemento DOM() y darle más información que solo 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 una idea?

Answer 1

Encontré una solución realmente muy mala. Uno puede usar el atributo title para pasar una propiedad de id.

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); 
      }; 

No recomendaría esta solución para ningún entorno de producción. Pero por ahora lo uso para poder seguir desarrollando. Pero aún estoy buscando una mejor solución.

Answer 2

Estaba buscando el elemento DOM también para implementar una información sobre herramientas personalizada. Después de un tiempo cavando en Google superposiciones, bibliotecas personalizadas y así sucesivamente, he terminado con la siguiente solución basada en el enfoque del título de Fredrik (usando 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; 
    } 

}); 

Esperamos que esto ayude a alguien.

Answer 3

Creo que este método es útil, aunque podría no ser adecuado para todos los entornos. Al configurar la imagen del marcador, agregue un ancla única 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 usted tiene una única decir selector:

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

o si tiene el marcador:

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

Answer 4

1. superposiciones personalizar (por implementos onAdd, dibujar , eliminar) mientras se arrastra tiene algunos problemas.
2. Tal vez se puede obtener el elemento DOM marcador por el nombre de la clase gmnoprint y el índice se ha anexado en.