¿Cómo obtener el elemento HTML DOM de un marcador de Google Maps?

Question

Dada una variable GMarker JS, ¿cómo obtengo el elemento HTML DOM que lo representa? Necesito esto para poder insertar un <div> propio en el mapa con el índice Z correcto.

Gracias.

Answer 1

Parece que la API de Google Maps no proporciona un método para devolver el elemento DOM de un marcador.

¿Desea crear su propio marcador personalizado? Si es así, puede crear una clase de marcador que extienda GOverlay. MarkerLight es un gran ejemplo de cómo lograr esto (y aquí está el example page).

Si todo lo que necesita es un icono personalizado, here es cómo hacerlo.

Answer 2

Perdón por publicar en una pregunta tan antigua, pero me he encontrado con esto. La solución que utilicé en Google Maps APIv3 fue copiar el "Marcador personalizado" de the Google Maps samples y agregar un método simple getDOMElement, que devuelve el div generado en la construcción del Marker.

CustomMarker.prototype.getDOMElement = function() { 
    return this.div_; 
} 

A continuación, puede utilizar marker.getDOMElement().style para cambiar dinámicamente el estilo de su marcador, y el elemento img niño de marker.getDOMElement() es el icono que se utiliza, por lo que puede cambiar de forma dinámica que también.

Answer 3

Este es un CustomMarker más simple que estoy usando. ¡Solo proporcione un elemento DOM y se usará como marcador!

// based on http://gmaps-samples-v3.googlecode.com/svn/trunk/overlayview/custommarker.html 

function CustomMarker(options) { 
    this.options = options; 
    this.element = options.element; 
    this.map = options.map; 
    this.position = options.position; 
    this.positionFunction = options.positionFunction || function() { 
    var point = this.getProjection().fromLatLngToDivPixel(this.position); 
    if (point) { 
     this.element.style.position = 'absolute'; 
     this.element.style.left = (point.x - jQuery(this.element).width()/2) + 'px'; 
     this.element.style.top = (point.y - jQuery(this.element).height()) + 'px'; 
     this.element.style.cursor = 'pointer'; 
    } 
    }; 

    this.setMap(this.map); 
} 

CustomMarker.prototype = new google.maps.OverlayView(); 
CustomMarker.prototype.draw = function() { 
    if (!this.div_) 
    this.getPanes().overlayImage.appendChild(this.element); 
    this.positionFunction(); 
}; 
CustomMarker.prototype.getPosition = function() { 
    return this.position; 
}; 
CustomMarker.prototype.setVisible = function(bool) { 
    jQuery(this.element).toggle(bool); 
}; 

~