Google Maps: Mehrere benutzerdefinierte HTML-Marker

Question

Ich habe an dieser fiddle gearbeitet, und ich hätte gerne einen Ratschlag.

Wie Sie sehen können, kann ich nicht mehrere Markierungen an der richtigen Stelle zu rendern. Egal was ich mache, beide Marker rendern basierend auf der Position des zweiten Markers im htmlMarker[i] Array.

Danke für Ihre Hilfe!

Als Referenz hier ist die 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); 
} 

ich die Geige aktualisiert haben (siehe Update) einige Protokollierung innerhalb von HTMLMarker zu tun(); und am Ende des Skripts. Hier ist die Ausgabe:

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 

So sieht es aus wie die richtigen Informationen in weitergegeben zu werden, aber irgendwo Dinge außer Kraft gesetzt werden.

UPDATE

konnte ich die Marker HTML-Elemente auf der Karte isolieren. Sieht aus wie sie innerhalb eines einzigen Overlay verschachtelt werden:

<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

Sie die Position der Bilder einstellen müssen (oder den divs, die die Bilder enthalten).

Derzeit stellen Sie die Position des overlayImage -pane (es ist ein einzelnes Element, jede Instanz HTMLMarker wird auf das gleiche Element/Scheibe angehängt werden)

Festcode:

//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/