Карты Google: несколько пользовательских HTML-маркеров

Question

Я работаю над этим fiddle, и мне бы хотелось получить совет.

Как вы можете видеть, я не могу получить несколько маркеров для рендеринга в нужном месте. Независимо от того, что я делаю, оба маркера отображают на основе местоположения второго маркера в массиве htmlMarker[i].

Благодарим за помощь!

Для справки, здесь является 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); 
} 

Я обновил скрипку (см обновления), чтобы сделать некоторое протоколирование внутри HTMLMarker(); и в конце скрипта. Вот результат:

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 

Так выглядит правильная информация становится передается в, но где-то переопределяется.

UPDATE

Я был в состоянии изолировать маркер HTML элементы на карте. Похоже, они быть вложены в один оверлей:

<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

Вы должны установить положение изображений (или Див-х, которые содержат изображения).

В настоящее время установить положение overlayImage -pane (это единственный элемент, каждый экземпляр HTMLMarker будет добавлен к тому же элементу/панели)

Исправлен код:

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