Google Maps: più marcatori HTML personalizzati

Question

Ho lavorato su questo fiddle e vorrei un consiglio.

Come potete vedere, non riesco a ottenere più marcatori per il rendering nella posizione corretta. Indipendentemente da ciò che faccio, entrambi i marcatori vengono visualizzati in base alla posizione del secondo marcatore nell'array htmlMarker[i].

Grazie per il vostro aiuto!

Per riferimento, ecco il JS:

var overlay; 

function initialize() { 
    var myLatLng = new google.maps.LatLng(62.323907, -150.109291); 
    var mapOptions = { 
     zoom: 11, 
     center: myLatLng, 
     mapTypeId: google.maps.MapTypeId.SATELLITE 
    }; 

    var gmap = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

    function HTMLMarker(lat,lng){ 
     this.lat = lat; 
     this.lng = lng; 
     this.pos = new google.maps.LatLng(lat,lng); 
    } 

    HTMLMarker.prototype = new google.maps.OverlayView(); 
    HTMLMarker.prototype.onRemove= function(){} 

    //init your html element here 
    HTMLMarker.prototype.onAdd= function(){ 
     div = document.createElement('DIV'); 
     div.className = "htmlMarker"; 
     div.innerHTML = '<img src="http://www.vcsd.org/img/icon/red.png">'; 
     var panes = this.getPanes(); 
     panes.overlayImage.appendChild(div); 
    } 

    HTMLMarker.prototype.draw = function(){ 
     var overlayProjection = this.getProjection(); 
     var position = overlayProjection.fromLatLngToDivPixel(this.pos); 
     var panes = this.getPanes(); 
     panes.overlayImage.style.left = position.x + 'px'; 
     panes.overlayImage.style.top = position.y + 'px'; 
    } 

    //to use it 
    htmlMarker = []; 
    htmlMarker[0] = new HTMLMarker(gmap.getCenter().k, gmap.getCenter().D); 
    htmlMarker[1] = new HTMLMarker(gmap.getCenter().k+.05, gmap.getCenter().D+.05); 
    htmlMarker[0].setMap(gmap); 
    htmlMarker[1].setMap(gmap); 
} 

Ho aggiornato il violino (vedi aggiornamento) per fare un po 'la registrazione all'interno di HTMLMarker(); e alla fine della sceneggiatura. Ecco l'output:

HTMLMarker(lat,lng)= 62.323907, -150.10929099999998 
HTMLMarker(lat,lng)= 62.373906999999996, -150.05929099999997 
HTMLMarker.prototype.draw=500.5001116444473, 296.6240725676762 
HTMLMarker.prototype.draw=573.3178894222365, 139.71828594914405 

Quindi sembra che le informazioni corrette è sempre passata in, ma da qualche parte le cose vengono sovrascritto.

UPDATE

sono stato in grado di isolare gli elementi HTML marcatore sulla mappa. Sembra che essi sono annidati all'interno di un singolo overlay:

<div style="transform: translateZ(0px); position: absolute; left: 573.317889422237px; top: 139.718285949144px; z-index: 104; width: 100%;"> 
    <div class="htmlMarker"> 
    <img src="http://www.vcsd.org/img/icon/red.png"> 
    </div> 
    <div class="htmlMarker"> 
    <img src="http://www.vcsd.org/img/icon/red.png"> 
    </div> 
</div> 

Answer 1

È necessario impostare la posizione delle immagini (o le div che contengono le immagini).

Attualmente si imposta la posizione del overlayImage -pane (è un singolo elemento, ogni istanza di HTMLMarker verrà aggiunto allo stesso elemento/riquadro)

codice fisso:

//init your html element here 
HTMLMarker.prototype.onAdd= function(){ 
    this.div = document.createElement('DIV'); 
    this.div.className = "htmlMarker"; 
    this.div.style.position='absolute'; 
    this.div.innerHTML = '<img src="http://www.vcsd.org/img/icon/red.png">'; 
    var panes = this.getPanes(); 
    panes.overlayImage.appendChild(this.div); 
} 

HTMLMarker.prototype.draw = function(){ 
    var overlayProjection = this.getProjection(); 
    var position = overlayProjection.fromLatLngToDivPixel(this.pos); 
    var panes = this.getPanes(); 
    this.div.style.left = position.x + 'px'; 
    this.div.style.top = position.y + 'px'; 
} 

http://jsfiddle.net/q2cnne7y/17/