Adding a number to a marker in Google Maps JS API

Question

I currently have markers displaying as below, but without the numbers that signify there is more than one item in that exact location.

I would like the markers to display as shown below:

I was able to in back-end group the items based on exact location and that is fine, but I can't seem to find a way to add the special number/count to show how many items are there without creating special images with numbers drawn in them. Ideas on how this could be done?

One other direction if I can't doing it cleanly is use PIL to add the number to the image. Still I don't think that is ideal.

Answer 1

So, what you want to do is inject HTML instead of images in the custom markers. It's essentially what you are doing but google allows you to OverlayViews , even of HTML type. See fiddle

HTMLMarker.prototype.onAdd= function(){
    div = document.createElement('DIV');
    div.className = "htmlMarker";
    div.innerHTML = '<img src="http://www.w3schools.com/html/pic_mountain.jpg" alt="Mountain View" style="width:30px;height:22px">'+ 'your number count'; //This HTML here is driven by your login to have numbers.
    var panes = this.getPanes();
    panes.overlayImage.appendChild(div);
}

===[ UPDATE ]===

So, I tried checking if I could add multiple overlays on the map . I could but they somehow ended up at the same location, and I tried multiple iterations but was not very successful in separating them out.

So, since you are essentially looking for numbering on markers, I looked around for other ways to solve this issue. I found this library on google maps, markers with labels .

You can find a fiddle on how I customized the markers here .