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 (18)

No comments have been left yet. Be the first