Google Maps API Tutorial Google Maps API Tutorial
Back to Home Page

Example of a Letter Marker for Google Maps API

View Example


Notes

If you only want to generate A-Z letter,, you can directly use icons in the Google Map Icon Collection.
This example shows you the way to dynamically generate letter marker. The key is to use google chart library API to dynamically generate a letter marker icon:
icon: 'http://chart.apis.google.com/chart?chst=d_map_spin&chld=1|0|FF0000|12|_|foo',
For the parameter "chld=1|0|FF0000|12|_|foo", "foo" contains letters to show, "FF0000" is the marker color, the first "1" controls the size of the marker, and "12" sets the font size.

Source Code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Google Map API V3: Add Marker</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
body { margin: 20; padding: 20 }
#map_canvas{
	width: 740px;
	height: 400px;
}
</style>
<script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(37.286172, -121.80929),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);

        var myLatlng = new google.maps.LatLng(37.286172, -121.80929);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|00FF00|000000',
            title: 'A Number Marker'
        });
      }
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>