Adding Numbers or Letters to Google Maps API Markers

June 4th, 2011 - Posted by Steve Marks to Javascript / jQuery, Web Development.

Adding Numbers or Letters to Google Maps API Markers

I’m a huge fan of the Google Maps API and love the amount of features it has to offer. One thing I get asked quite a lot though and that I can’t find in the documentation is “How do I add numbers or letters to the markers?“.

The Solution

The solution is actually quite simple and simply involves you using an image for the marker icons. As part of Google Chart Tools you can generate markers that contain a letter or number, as well change the marker and font colors.

Demonstration

Let’s put it into practice using a simple demonstration:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function initialize() {
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
    var myOptions = {
      zoom: 4,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
    var marker = new google.maps.Marker({
        position: myLatlng, 
        map: map,
        icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|FF0000|000000'
    });   
  }
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>

Notice the ‘icon’ option when setting up the marker is a link to an image? This URL contains three key parts that effect the look of the marker:

‘A’ – The letter shown on the marker. This can also be a letter, a symbol, or a combination of them all.
‘FF0000′ – The hex color of the marker
’000000′ – The hex color of the font used

As a result of the above we would get the following:

A Google Maps marker containing a letter

This entry was posted on Saturday, June 4th, 2011 at 8:17 pm by +Steve Marks and is filed under Javascript / jQuery, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments...

Fear not, we won't publish this

Comments (15)
  1. RD says:

    Thank you. This was helpful.

    Cheers,
    RD

  2. Nat says:

    Thank you so much.
    This solved an issue I’ve been trying to solve for a while.

  3. Glad I could help :)

  4. Somendra Tiwari says:

    i did not getting from anywhere to write text over marker.. i got solution here.. thank you

  5. Anonymous says:

    thank you very much
    this was so useful, I searched about it for a lot of time and didn’t find it
    great thanks :D

  6. Great post… couldn’t find this in the documentation!?

    Thanks :)

  7. Chris says:

    Thanks for posting.

    That API (http://developers.google.com/chart/image/docs/gallery/dynamic_icons#pins) is deprecated, but it sounds like it will continue to work until April 2015.

  8. snuffish says:

    You just saved my day mate! Just what I looked for! :)

  9. Bruce C says:

    Thank you for this information. We were going crazy looking for google markers with letters on them.

  10. Tomson says:

    Hi,

    the Google Image Chart API is officially deprecated

  11. Iaron says:

    a great help! thanks!!

  12. bkw says:

    My god why isn’t this in the official docs. Thank you.

  13. Mike says:

    Hey, thanks for this – very simple and works really well!!

  14. Tony says:

    Very informative. Thanks a lot.

  15. Pranay says:

    Nice tip…