I am a avid fan of Google’s Map API, have even have created my own WordPress Google Maps plug-in (thydzikGoogleMap), but one feature that I find lacking are customisable markers, with the need to include an image file for every customisable marker, now if you want a selection of colours and labels this creates a huge image database.
Google has gone in the write step their MapIconMaker allowing very customisable markers using the Charts API marker output. But why not take this a step further and add dynamically generated text as well.
Hence, I provide a little demo of some PHP code that does this that I quickly whipped up. Here are some example markers:
(Have a look at the image name)
Now that gets a little boring, how about some color:
(Again, have a look at the image name)
Unfortunately, not all symbols work (not sure why, even though they are in the font) and if the symbol doesn’t work it will default to the default bullet (this is done with a modified font file).
Also there may be an issue with alignment. All main characters 0-9 and A-Z; I have added manual offsets, this could be improved.
You will need to download the modified arial font and host it in the same directory.
Update: it looks like in Internet Explorer the transparencies are incorrectly displayed, this is not the case when displayed on a Google Map.
Have a look at the PHP source code below:
<?php
$color = $_GET['color'];
if (!$color) {$color = "ff776b";} //default google map color
$color = str_replace("#", "", $color);
$string = $_GET['text'];
//some smarts to prevent hotlinking
if (!stristr($_SERVER['HTTP_REFERER'], "thydzik.com")) {
$string = chr(169);
}
$font = 'arial';
//unfortunately we still must do some offsetting
switch (ord(substr($string,0,1))) {
case 49: //1
$offset = -2;
break;
case 55: //7
$offset = -1;
break;
case 65: //A
$offset = 1;
break;
case 74: //J
$offset = -1;
break;
case 84: //T
$offset = 1;
break;
case 99: //c
$offset = -1;
break;
case 106: //j
$offset = 1;
break;
}
if (strlen($string) == 1) {
$fontsize = 10.5;
} else if (strlen($string) == 2) {
$fontsize = 9;
} else {
$fontsize = 10.5;
$offset = 0; //reset offset
$string = chr(149);
}
$bbox = imagettfbbox($fontsize, 0, $font, $string);
$width = $bbox[2] - $bbox[0] + 1;
$height = $bbox[1] - $bbox[7] + 1;
$image_name = "http://chart.apis.google.com/chart?cht=mm&chs=20x34&chco=$color,$color,000000&ext=.png";
$im = imagecreatefrompng($image_name);
imageAlphaBlending($im, true);
imageSaveAlpha($im, true);
$black = imagecolorallocate($im, 0, 0, 0);
imagettftext($im, $fontsize, 0, 11 - $width/2 + $offset, 9 + $height/2, $black, $font, $string);
header("Content-type: image/png");
imagepng($im);
imagedestroy($im);
?>
EDIT: 27th January 2010
I have experienced some users with errors produced by the imagecreatefrompng, either due to versions <4.3.0 disabling remote file access or allow_url_fopen being disabled.
A greater supported alternative is to use curl to fetch the Google marker. Replace the above with the below modification;
$image_name = "http://chart.apis.google.com/chart?cht=mm&chs=20x34&chco=$color,$color,000000&ext=.png"; $ch = curl_init(); curl_setopt ($ch, CURLOPT_URL, $image_name); curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, 0); // Getting binary data curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_BINARYTRANSFER, 1); $image_string = curl_exec($ch); curl_close($ch); $im = imagecreatefromstring ($image_string);
Tags: Arial, Dynamic, Google Maps, icons, markers, php, symbols
Hi, I wanna ask about the color selection on the placemarker for my maps…I find it’s a bit difficult for me to change the color selection from red to white…even I tried many times. That’s the problem for me and I’m not so keen in computer..
Hi Lai
What maps are you referring to? as these Google maps using my WordPress plugin, or a separate Google map, can you provide a link?
If it is the later, than unfortunately, with out being ‘so keen in computer’ it will be a little hard for you.
Hey, about hosting fonts on a server… How do I do that? Can I display custom fonts on my website without other having the font?
Thanks! -Joe
Without othes having that font on their computer, i mean?
Joe,
Not quite following. You will need the font uploaded onto your web server to display custom text on the markers.
Thydzik,
Thanks for sharing this code with the comunity. That is what i was looking for months!
About the icon size, is there any way to change it?
Because when i try to change the parameter CHS on the png address, it doesnt change the size and bugs out the text on the icon.
Again, thanks for this great code.
Regards.
Domingos,
I haven’t implemented the icon size CHS as a parameter, mainly as I like to use the default size.
This could be changed fairly easy though.
Thydzik,
Thanks for your reply.
I think the original size is great, but when i implement your code to auto-generate a sequence of markers into my map (number is generated inside the javascript google map api) the icon size turns way too small.
Take a look: http://img526.imageshack.us/my.php?image=mapv.jpg
Any hints?
Thank you.
Regards.
Domingos, I’m not too sure.
The PHP code should produce default sized markers, if you bring up just the marker image in a browser is it the correct size?
In the JavaScript, how are you declaring your new marker icons? do you either define the size or copy the Google default marker as a base?
Thydzik,
Yes, if i bring up the marker image in a brower it shows the correct size.
Im declaring the icon with this method:
iconRed.image = ‘http://www.mydomain.com/map/marker.php?text=’ + i + ‘&color=CD0000′;
iconBlue.image = ‘http://www.mydomain.com/map/marker.php?text=’ + i + ‘&color=6b98ff’;
So each time the gmap api insert a mark, it raise its number.
Im didnt define any size for the icon.
The image that im using is the same one that is used in your code:
$image_name = “http://chart.apis.google.com/chart?cht=mm&chs=20×34&chco=$color,$color,000000&ext=.png”;
it should work, from my experience all you need to do is declare the icon as a default Google icon and then update the marker, i.e.
iconRed new GIcon(G_DEFAULT_ICON);
iconRed.image = ‘http://www.mydomain.com/map/marker.php?text=’ + i + ‘&color=CD0000′;
given you are using the default size of the Google default icon the size should be the default size.
but perhaps, if still no luck try
iconRed.iconSize=new GSize(20, 34);
Thydzik,
Thank you so much! It worked!
All i had to change was iconRed.iconSize=new GSize(20, 34);
Again, thanks for your great work!
Best regards.
Hi, i worked with this fine locally using apache server, now I deployed to a iis with php5 and it does not shows the icon, move the code to a host that uses linux apache and there it shows.
is there a workaround to make it work with IIS
thanks
Norman,
I believe this is a problem with the location of the font file. If you comment out
header("Content-type: image/png");you will see the error message.Try replacing the line
$font = 'arial';with$font = realpath('arial.ttf');Please let me know if this works.
Hi thanks Thydzik, but no error or image, here is the url
http://74.208.77.78/ecutrak_api/gicon.php?text=A1&color=FFAAFF
and here is phpinfo()
http://74.208.77.78/ecutrak_api/info.php
thanks
Norman,
I am not sure, try coding a very basic image using the PHP image functions and adding more onto that.
Try the example here
http://au2.php.net/manual/en/function.imagecreate.php
Anyway to make the color of the icon blick ?
the icon blink or black?
black yes, blink maybe, but not sure how.
Hello
I am wondering if we may directly link to your php files for our own icons ? Because it uses your bandwidth.
I want to explain how to use your icons on my icon collection project : http://code.google.com/p/google-maps-icons/wiki/NumericIcons
Nico,
Not a problem, but please link to this one
http://thydzik.com/thydzikGoogleMap/markerlink.php?text=%BE&color=cb9d7c
(changing the parameters as you wish)
Travis
Hello Travis,
Thanks for the tip.
I explained it all, in relation with my project on the page : http://code.google.com/p/google-maps-icons/wiki/NumericIcons
I linked/credited your work. Hope it’s Ok with you. If not, just tell me and I will remove :)
–
Nico
Thanks for that.
I have added some smarts to the php code to only allow google.com to view it correctly.
What if people use google in other language ? url would be maps.google.fr for the french like me.
But it looks like I can’t link to the icons from maps.google.com either.
It says “impossible to contact the server” when I try to save a placemark with an icon in thydzik.com/*
Am I doing something wrong ?
I thought of that (and tried it), but I don’t think there is the equivalent Google code for other countries/languages.
Hot linking of the images will still work (the code.google.com page still works), and saving them works. However, if you hot link on another domain, it will work but come up as a © (copyright) symbol.
If people want the functionality, it is very easy to copy the php onto their server.
Ok I see, so it’s not possible to hot link from my personnal maps.google.com to thydzik.com
The only way is to host the php file. Unfortunately, for users like me who don’t have a server, it’s a little problem :)
Anyway, thanks a lot. I will keep my tutorial of your icons, for people who have a host.
What is your personal maps.google.com?
I wasn’t aware of being able to add user defined icons to the maps.
But, essentially, if the domain has ‘google.com’ in it, it will work.
For example this public map I created :
http://maps.google.com/maps/ms?ptab=2&ie=UTF8&oe=UTF8&msa=0&msid=105794763617951274407.00045e3fe0d0cbe3e88e7
I checked with Safari what URLs can call files.
Maybe the other Google domains gmodules.com and gstatic.com need to be autorized as a referer too.
Nico,
Thanks for the info.
Wasn’t apply to get your link working, but tried out the Google My Maps functionality with the markers and it worked no problems.
I have also added gmodules.com and gstatic.com incase.
Strange, I tried today, to add a custom icon, like he other day.
This time, I can save the place, with a thydzik.com/* icon… But it has the copyright symbol, even if I am on maps.google.com/maps (not the google.fr domain).
There ain’t no copyright symbol for you, I assume ?
I have removed that hotlinking code, should all work fine now.
@thydzik : I desist :(
I don’t know if I am doing something wrong.
1/ I am on the maps.google.com in english
2/ I add a placemark to “My maps” : I take one of your examples : http://thydzik.com/thydzikGoogleMap/marker.php?text=A&color=c89bff
3/ The icon has a copyright symbol
4/ I manage to save the place
… but there are copyright everywhere…
Are you sure you cut the hotlinking code ?
Sorry to bother you
as I mentioned, use markerlink
http://thydzik.com/thydzikGoogleMap/markerlink.php?text=%BE&color=cb9d7c
Well, I didn’t see you used another URL. The hotlinking removal worked. The copyright symbol is not there anymore.
But the save bug is still here, and from what I saw on google forums (http://groups.google.com/group/google-chart-api/browse_thread/thread/b1c31d83598bb9ee), what I want (adding dynamic icons manually, in My maps), cannot be done.
In conclusion : dynamic icons is only for Google maps API.
Thanks for time you used on this tests.
Regards
–
Nico
Hi,
How would I add my own image marker.
Is there anyone to help me.
Thanks,
Meena
I’m not good with php..
I have installed an apache on winxp.
I have copy and paste the php code in a file named marker.php on the root directory, and copied also in the same directory arial.ttf.
I have comment also the code of the site.
//some smarts to prevent hotlinking
// if (!stristr($_SERVER['HTTP_REFERER'], “thydzik.com”)) {
// $string = chr(169);
// }
If I try to make a http://nick/marker.php?text=A it doesn’t work.
Where is my mistake?
Thanks for help
Nick
here is the HTML file.
You (c) works, mine doesn’t :(
Thanks again
Nick
IMG SRC=”marker.php?text=A”
IMG SRC=”http://thydzik.com/thydzikGoogleMap/marker.php?text=69&color=ffed5c”
Nick,
Hard to say, without a global link I can view. (http://nick/marker.php?text=A doesn’t work)
What happens when you go to marker.php on your server?
Blank page, php error message, just displays as text?
Hi thydzik,
actually I have blank page…
Thanks
Nick
If I run the page alone this message appear (without including it in a img src):
marker.php?text=A
the browser says :
The image “http://NICK/marker.php?text=A” cannont be displayed because contains some errors.
maybe some error in the location of the source image??
http://chart.apis.google.com/chart?cht=mm&;chs=20×34&chco=$color,$color,000000&ext=.png
Thank You Again
Hi thydzik,
I found the error :)
It is the ; in the URL from google apis after mm&, it must be deleted.
The right URL to put in the code is this.
http://chart.apis.google.com/chart?cht=mm&chs=20×34&chco=$color,$color,000000&ext=.png
Thanks Again
Nick
Hi thydzik,
I’ve tried to download the arial.ttf file that is hosted on this page, but it seems to be corrupt and therefore I can’t display and characters over the marker!
Please help!
jesu, I have confirmed that Windows won’t open the font file (it produces an error), but it will still work with the code.
Nice job, but google has its own method to build custom icons.
See here:
http://groups.google.com/group/google-chart-api/web/chart-types-for-map-pins?pli=1
Cheers
@Koen (December 23, 2009 at 7:33 pm)
thydzik did a fantastic job!
The Google method you mention does not apply to Google “My Maps” as it cannot be saved (googlit for users’ issues or just try) but thydzik’s does!!! This is critical because most of people use only “My Maps” to create maps stuffed with lots of info.
The key issue with Google method is that provides the url with some “|”s which “My Maps” do not accept (during “save”).
I am not familiar with php and I will use thydzik’s page like this:
http://thydzik.com/thydzikGoogleMap/marker.php?color=fdabff&text=a