Numbering on Custom markers in Google Map

Question

I am using google map for showing locations.

My requirement is that each and every location is labelled with numbers.

Currently using this code ,

for (var i = 0; i < data.length; i++){
        var image = new google.maps.MarkerImage(
        '{{STATIC_URL}}img/icon-pin'+(i+1)+'.png',
        new google.maps.Size(68, 49),
        new google.maps.Point(0,0),
        new google.maps.Point(19, 49));

        var marker = new google.maps.Marker({
        position: new google.maps.LatLng(data[i].lat, data[i].lon), 
        map: map,
        icon:image,
        });
    }

Here with respect to i , new image is fetched from img folder like ,
i=0 image will be img/icon-pin1.png
i=1 image will be img/icon-pin2.png

I know it is not proper way to placing numbered markers in map.

My custom marker is like,

How can i add numbers to this image, while inserting marker.

Expected result,

Answer 1

As stated in my comment, a few solutions are available and depicted here: How can I create numbered map markers in Google Maps V3?

Another way would be to manipulate the marker image with PHP (if this is an option) as explained in this answer: https://stackoverflow.com/a/20778505/1238965

The above example shows how to change the background of the image, but you could also add some text with the use of imagettftext.

Hope this helps!