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:
Follow us on Twitter
Subscribe to RSS Feed
Great post… couldn’t find this in the documentation!?
Thanks :)
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.
You just saved my day mate! Just what I looked for! :)
Thank you for this information. We were going crazy looking for google markers with letters on them.
Hi,
the Google Image Chart API is officially deprecated
a great help! thanks!!
My god why isn’t this in the official docs. Thank you.
Hey, thanks for this – very simple and works really well!!
Very informative. Thanks a lot.
Nice tip…