Display Number on Marker for Google Maps

Question

All, I've got the following code to display my markers on my maps:

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script  type="text/javascript">
function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function'){ 
    window.onload = func
} else { 
    window.onload = function() {
        oldonload();
        func();
    }
}
}

var map,
    infowin=new google.maps.InfoWindow({content:'moin'});
function loadMap() 
{
  map = new google.maps.Map(
    document.getElementById('map'),
    {   
      zoom: 12,
      mapTypeId:google.maps.MapTypeId.ROADMAP,
      center:new google.maps.LatLng(<?php echo $_SESSION['pav_event_latitude']; ?>, 
                                    <?php echo $_SESSION['pav_event_longitude']; ?>)
    });

  addPoints(myStores);
}

function addPoints( points )
{  
  var bounds=new google.maps.LatLngBounds();
  for ( var p = 0; p < points.length; ++p )
  {
    var pointData = points[p];
    if ( pointData == null ) {map.fitBounds(bounds);return; }
    var point = new google.maps.LatLng( pointData.latitude, pointData.longitude );
    bounds.union(new google.maps.LatLngBounds(point));
    createMarker( point,  pointData.html );
  }
  map.fitBounds(bounds);

}

function createMarker(point,  popuphtml) 
{
  var popuphtml = "<div id=\"popup\">" + popuphtml + "<\/div>";
  var marker = new google.maps.Marker(
    {
      position:point,
      map:map
    }
  );
  google.maps.event.addListener(marker, 'click', function() {
      infowin.setContent(popuphtml)
      infowin.open(map,marker);
    });

}
function Store( lat, long, text )
{
    this.latitude = lat;
    this.longitude = long;
    this.html = text;
}

var myStores = [<?php echo $jsData;?>, null];
addLoadEvent(loadMap);
</script>

This works great. However I'm trying to say add a number over the marker so that people can relate the number on my site with the marker in Google Maps. How can I go about creating the number over top of my markers (on top of the actual icon and not in an information bubble)?

Any help would be greatly appreciate! Thanks in advance!

Answer 1

EDIT: This API is now deprecated, and I can no longer recommend this answer.

---

You could use Google's Charts API to generate a pin image.

See: http://code.google.com/apis/chart/infographics/docs/dynamic_icons.html#pins

It'll make and return an image of a marker from the parameters you specify. An example usage would be: https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=2|FF776B|000000

To implement it into your Google Map, it can be added into the new Marker() code:

var number = 2; // or whatever you want to do here
var marker = new google.maps.Marker(
    {
        position:point,
        map:map,
        icon:'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+number+'|FF776B|000000',
        shadow:'https://chart.googleapis.com/chart?chst=d_map_pin_shadow'
    }
);

Answer 2

EDIT:

For quite some time now, map markers have an option called label available.

var marker = new google.maps.Marker({
    position:point,
    map:map,
    label: "Your text here."
});

Labels themselves have few options to play with. You can read more about it here.

---

Original answer

Here is a service similar to one described by Rick - but still active and you can upload your own marker image.

Service is no longer available.