Feb 22, 2009
Create Dynamic Numbered Markers for Google Maps
When you’re plotting locations from a database or matching search results to markers on the map, you may want to add labels. For example, the closest locations on this WiFi hotspot are both listed and plotted, marking spots with numbers. Similarly, Google shows local search results with alpha labels, A-Z.
Previously, you had to download sets of markers. If you needed a marker you didn’t have, you needed to make a new one. Thanks to Google Charts, you can create dynamic labeled markers.
All it requires is passing the label in the URL. Pretty easy. You can also change the color of the marker and its border. Here’s the URL for the “A” marker:
http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|00CC99|000000
Even better, you can use the markers anywhere you find useful, including other mapping providers. An example of this using Mapstraction is in my book. If you’d like to see it in Google Maps proper, view the source of this sample map.
Hi, I'm Adam. I'm writing a book about developing maps on the web. This site is where I'll share the things I find and help you create your own maps. 
Are you able to save maps after plugging in the URL for a custom marker? Everything (including printing out the map with custom markers) looks and works great — until it tries to contact the server to save the map. Then it gives me a “Unable to contact server.” error…
Any ideas?
I’m not sure what you mean by “saving” a map. This post is referring to people who use a mapping API to embed maps into their own website.
Thanks for the shortcut Adam, works beautifully.
Actually, spoke too soon, setting:
var customIcon = new GIcon(G_DEFAULT_ICON);
customIcon.image = “http://www.google.com/chart?chst=d_map_pin_letter&chld=1|FD7569|000000″;
Gives me the dreaded “shadow only” map.
Have you got this working?
The shadow only map seems to happen when the icon image cannot be loaded. I have this working under Mapstraction, but I checked out the maps playground and was able to get it working.
Go to this example:
http://code.google.com/apis/ajax/playground/#map_icon_custom
Replace the letteredIcon.image line with this:
letteredIcon.image = “http://www.google.com/chart?chst=d_map_pin_letter&chld=” + (1+index) + “|FF3333|000000″;
You can check out a working version here:
http://savedbythegoog.appspot.com/?id=ag5zYXZlZGJ5dGhlZ29vZ3ISCxIJU2F2ZWRDb2RlGOeetwEM
Maybe it’s just me, I’ll fire up another machine, but I still get a shadows only map, I’m on OSX, FF 3.0.11, and Safari 3.1.2.
The example at code.google.com works, but then again, that points to actual pngs. When I change it to point to dynamic version, I get the shadows.
I’m also getting only shadows. Anyone else manage to get this to work?
It doesn’t work, which makes it completely useless and makes you wonder why they bothered.
Aha! This discussion has a fix:
http://groups.google.com/group/Google-Maps-API/msg/f12f47f23ed791b2
Google returns a 400 error whenever you access the image with a referrer. However, if you use the chart.apis.google.com server, it seems to be happy.
Here’s an example (working this time):
http://savedbythegoog.appspot.com/?id=ag5zYXZlZGJ5dGhlZ29vZ3ISCxIJU2F2ZWRDb2RlGNCMzwEM
Let me know if you still see shadows.
Nice. I appreciate your diligence Adam!
Hello
I am contacting you because I am the creator of “Map icons collection”, and I thought you might be interested in talking about my project in your blog.
Map icons collection is a pack of 500 free (static) icons for your placemarks. You can put them manually in your Google Maps with the “My maps” feature, or automaticly with the Google Maps API.
Organized in color categories, you will get a complete collection of icons, such as cinema, school, bank, japanese restaurant and clothes store.
Even thought the icons are not dynamic, I thought it could be nice for you to bookmark it.
See the rest of the icons here : http://code.google.com/p/google-maps-icons/
Regards,
–
Nico Mollet
Do you have any recommendations for getting around this marker label limitation of the static map API?
http://groups.google.com.jm/group/google-maps-api/browse_thread/thread/a81ab618fe763d8c/3de3d4676283dc4c?lnk=raot
Hi Jonah –
Static Google Maps allow only a single character label, so numbered markers can only be 0-9. Here is a static maps wizard:
http://gmaps-samples.googlecode.com/svn/trunk/simplewizard/makestaticmap.html
MapQuest lets you include labels into at least the three digits on its static maps. You can also use entirely custom markers (including the auto-generated labels Google pins) with MapQuest:
http://platform.beta.mapquest.com/staticmap/
Let me know how it goes!