Push It to Live!

Google maps markers with numbers or text

This is a quick tip to add markers with numbers or text on demand to a Google Maps map.

The trick is replace the marker icon with a custom one that has the number/text on it, but the problem is how to do it on demand. Google charts dynamic icons has a simple interface to do this, by crafting simple urls it renders custom maps like markers. 

Some Examples:

  http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=X|ff776b
  http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=$|ff776b
  http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=-2|000000|ff0000
  http://chart.apis.google.com/chart?chst=d_map_xpin_icon&chld=pin|bank-dollar|52B552

Example marker code:

var image = 'http://chart.apis.google.com/chart?chst=d_map_xpin_icon&chld=pin|bank-dollar|52B552';
  var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
  var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image
  });

You can see a complete example at http://studio.livemade.com/media/demo/marker.html

Have Fun, Sebastián

Reference:

http://code.google.com/apis/chart/docs/gallery/dynamic_icons.html

http://code.google.com/apis/maps/documentation/javascript/overlays.html#Icons