Google Maps: Multiple Custom HTML Markers

Question

I am working on this fiddle and I would like some advice.

As you can see, I cannot get multiple markers for rendering in the right place. No matter what I do, both markers are displayed based on the location of the second marker in the htmlMarker[i] array.

Thanks for your help!

For reference, here is 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); } 

I updated the script (see update) to make some entries inside HTMLMarker (); and at the end of the script. Here is the result:

 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 it looks like the right information is being transmitted, but somewhere things are redefined.

UPDATE

I managed to highlight the elements of the HTML marker on the map. It looks like they are nested in one 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

You must set the position of the images (or div containing the images).

You are currently setting the position overlayImage -pane (this is one element, each instance of HTMLMarker will be added to the same element / panel)

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/