I want to have numbered map markers for my google maps and currently I'm using the Google Charts API method to dynamically create numbered markers. However I am not able to use my own icons with that method.

Is there a way to use my own custom map marker icons, then overlay/have a number on top of it?

Alternatively, is there a quick way to create 1000 .PNG markers running from number 1 to 1000? Like a batch process in Photoshop

I want to have numbered map markers for my google maps and currently I'm using the Google Charts API method to dynamically create numbered markers. However I am not able to use my own icons with that method.

Is there a way to use my own custom map marker icons, then overlay/have a number on top of it?

Alternatively, is there a quick way to create 1000 .PNG markers running from number 1 to 1000? Like a batch process in Photoshop

• php
• javascript
• google-maps

• Alternatively, is there a quick way to create 1000 .PNG markers... yes you can do that in PHP+GD. Infact, you do not need to pre-create the markers. You can create them on demand like marker-gen.php?text=123. Will that work? – Salman Arshad Commented Jun 24, 2011 at 6:27
• I dont have much experience with PHP+GD. Suppose I manage to create numbered markers using PHP+GD, can they be brought into Google Maps using icon: "http://www.site./marker-gen.php?text=123"? – Nyxynyx Commented Jun 24, 2011 at 6:40
• yes, theoretically there is no difference between "http://www.site./marker-123.png" and "http://www.site./marker.php?text=123" provided PHP supplies correct header along with the image. – Salman Arshad Commented Jun 24, 2011 at 8:11
• 1 I just updated my code a little, minor improvements. – Salman Arshad Commented Jun 24, 2011 at 11:00
• @Salman A: thank you, you rock :) – Nyxynyx Commented Jun 24, 2011 at 13:22

2 Answers 2

I borrowed this code from an article I wrote and tweaked it a little. You should download this image, edit it a bit in Photoshop and place it in the same directory as that of the PHP script. Tweak the numbers in the script until you get something decent.

<?php
define("FONT_SIZE", 6);                            // font size in points
define("FONT_PATH", "c:/windows/fonts/arial.ttf"); // path to a ttf font file
define("FONT_COLOR", 0x00000000);                  // 4 byte color
                                                   // alpha  -- 0x00 thru 0x7F; solid thru transparent
                                                   // red    -- 0x00 thru 0xFF
                                                   // greeen -- 0x00 thru 0xFF
                                                   // blue -- 0x00 thru 0xFF
$text = $_GET["text"];
$gdimage = imagecreatefrompng("marker.png");
imagesavealpha($gdimage, true);
list($x0, $y0, , , $x1, $y1) = imagettfbbox(FONT_SIZE, 0, FONT_PATH, $text);
$imwide = imagesx($gdimage);
$imtall = imagesy($gdimage) - 14;                  // adjusted to exclude the "tail" of the marker
$bbwide = abs($x1 - $x0);
$bbtall = abs($y1 - $y0);
$tlx = ($imwide - $bbwide) >> 1; $tlx -= 1;        // top-left x of the box
$tly = ($imtall - $bbtall) >> 1; $tly -= 1;        // top-left y of the box
$bbx = $tlx - $x0;                                 // top-left x to bottom left x + adjust base point
$bby = $tly + $bbtall - $y0;                       // top-left y to bottom left y + adjust base point
imagettftext($gdimage, FONT_SIZE, 0, $bbx, $bby, FONT_COLOR, FONT_PATH, $text);
header("Content-Type: image/png");
header("Expires: " . gmdate("D, d M Y H:i:s", time() + 60 * 60 * 24 * 180) . " GMT");
imagepng($gdimage);
?>

Sample output on my system:

You can now do this with Google Charts. Here is an example syntax:

(scale|rotation|color|fontsize|bold(b) or normal(_)|text[|line2]
https://chart.googleapis./chart?chst=d_map_spin&chld=1.0|0|FF8844|12|_|221B

Here is the documentation.