Custom Google Maps Pin with Numbers or Letters on v3 API

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);
header('Content-type: image/png');
imagepng($im);
imagedestroy($im);


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.