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

Example of a Number Marker for Google Maps API

View Example


Notes

If the numbers you want are less than 100, you can directly use icons in the Google Map Icon Collection.
This example shows you the way to dynamically generate number marker. The key is to use google chart library API to dynamically generate a number marker icon:
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|00FF00|000000',
For the parameter "chld=7|00FF00|000000", "7" is the number to show and "00FF00" is the marker color.

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>