Come ottenere l'elemento DOM HTML di un indicatore di Google Maps?

Question

Dato una variabile JS GMarker, come ottengo l'elemento DOM HTML che lo rappresenta? Ho bisogno di questo, così posso inserire uno nella mia mappa con lo z-index corretto.

Grazie.

Answer 1

Sembra che l'API di Google Maps non fornisca un metodo per restituire l'elemento DOM di un marcatore.

Vuoi creare il tuo indicatore personalizzato? In tal caso, puoi creare una classe marker che estende GOverlay. MarkerLight è un ottimo esempio di come ottenere ciò (ed ecco lo example page).

Se tutto ciò che serve è un'icona personalizzata, here è come farlo.

Answer 2

Mi dispiace postare su una domanda così vecchia, ma mi sono appena imbattuto in questo. La soluzione che ho utilizzato in Google Maps APIv3 era copiare il "Marcatore personalizzato" da the Google Maps samples e aggiungere un metodo semplice getDOMElement, che restituisce lo div generato nella costruzione del Marker.

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

È quindi possibile utilizzare marker.getDOMElement().style per cambiare dinamicamente lo stile del vostro marcatore, e l'elemento img figlio di marker.getDOMElement() è l'icona utilizzata, in modo da poter cambiare la situazione anche in modo dinamico.

Answer 3

Questo è un CustomMarker più semplice che sto utilizzando. Basta fornire un elemento DOM e sarà usato come marker!

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

~