Google Maps Javascript API custom marker number

Question

I am using custom images for my markers using google maps javascript api V3 and I was wondering if anyone knows how to super impose a number on top of those. I have a box image and I need to dynamically place a number in the box. I don't know if there is a style way of doing this or if someone can tell me how to do it via javascript.

Answer 1

You can use maps utility library ( http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries ). RichMarker & styledMarker (scroll down the page) are probably most useful to you.

Option 2 - you can roll your own implementing overlay class (a bit of work required). Example is here http://gmaps-samples-v3.googlecode.com/svn/trunk/overlayview/custommarker.html

Option 3 - (more tedious) is to create custom marker images with numbers on them.

Answer 2

Support for single character marker labels was added to Google Maps in version 3.21 (Aug 2015). See the new marker label API . Unfortunately, this is limited to single digits , so if you need 2+ digit numbers, you will still need to use an add on library like RichMarker.

You can now create your label marker like this:

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(latitude, longitude), 
  icon: markerIcon,
  label: {
    text: '1'
  }
});