I recently worked on a Google maps project that needed to have a typical list of locations with corresponding pins on the map. There were a ton of recommendation for using the now deprecated google charts or layering custom InfoBoxes, etc..
While these would technically work, they are limited solutions. After thinking about it for a while, I came up with a pretty simple solution that works well for the project. Basically, it’s just rolling your own light Charts tool..
To start, make a transparent PNG as your pin background – here is the one for this project:
Next, load a very simple PHP (or any language) script (im calling mine mappin.php) that renders simple text on top…
// Import the image to use $originalImage = "mappin.png";
$im = imagecreatefrompng($originalImage);
imagesavealpha($im, true); // important to keep the png's transparency
$black = imagecolorallocate($im, 0, 0, 0);
$width = 36; // the width of the image
$height = 36; // the height of the image
$font = 12; // font size
$digit = $_GET['id']; // digit
$leftTextPos = 15 - (strlen($digit)*3);
imagestring($im, $font, $leftTextPos, 6, $digit, $black);
See where this is going?
Next up, in my google maps generation, I add a custom pin with the url “/mappin.php?id=1″ – where 1 is your count iterator..
var image = new google.maps.MarkerImage('/mappin.php?id=' + $(this).attr('data-count')...
Obviously, this isn’t the full code – at some point I may package it all up with the code – but, if you are messing with custom map pins, I hope this helps.