Google Maps: Multiple Custom HTML Markers

Question

I have been working on this fiddle, and I\'d like some advice.

As you can see, I can\'t get multiple markers to render in the correct place. No matter what I do, bo

Answer 1

You must set the position of the images(or the div's that contain the images).

Currently you set the position of the overlayImage-pane(it's a single element, each instance of HTMLMarker will be appended to the same element/pane)

Fixed code:

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