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'
    }
);