Happy Turkey Day

Thanksgiving is upon us here in the US... Time for turkey, stuffing, and, of course, Maps API turkey icons with perfect 45-degree shadows:

Creating custom markers for the Maps API is easy in terms of programming and hard in terms of graphic design. We use a custom Adobe Photoshop action internally to produce accurate marker shadows. I have been pestering our UI wizard Jens to let me publish the action publicly so that we start seeing prettier shadows on API sites, but right now using the action requires a PhD in Photoshop and a Post Doc in How Jens’ Mind Works. He assures me that we will release a simpler version of the action by the end of the year.

In the meantime, here is a basic step-by-step guide, though you are still on your own in creating nice-looking shadows:

Note: The images displayed below are 24-bit PNGs with alpha transparency, so they may look incorrect in Internet Explorer. However, the Maps API code snippets below should work in all browsers.

1. Create your marker image. It should be a 24-bit PNG image so that it supports true alpha transparency. This is important so that the icon is properly anti-aliased and still looks good on top of the map. Here is our turkey marker foreground image (59x62 pixels):

   

2. Now create your shadow. You should add padding around the shadow so that the shadow is in the correct position when you line up the top-left pixels of the icon and shadow images. Here is our shadow image (91x62 pixels):

   

   And here is the icon image overlaid in the correct position on top of the shadow image:

   

3. Finally, decide where you want the icon to be anchored to the map and where you want the info window to be anchored to the icon. Most icons have a well-defined "tip" at which they should be anchored. Since our turkey has an odd shape, we just choose a point between the turkey's feet. The Maps API expects this coordinate to be measured from the top-left pixel of the marker. So, in the case of our turkey icon, we choose the icon anchor point (37, 59) because our anchor point is 37 pixels over and 59 pixels down from the top-left pixel of the turkey icon. Likewise, we choose (31, 8) for the info window anchor point because we want the info window to be attached to the turkey's head:

   

And you are done! Once you have created your images and chosen your anchor points, you tie them together with code like this:

var icon = new GIcon();
icon.image = "http://www.google.com/mapfiles/turkey.png";
icon.shadow = "http://www.google.com/mapfiles/turkeyshadow.png";
icon.iconSize = new GSize(59, 62);
icon.shadowSize = new GSize(91, 62);
icon.iconAnchor = new GPoint(37, 59);
icon.infoWindowAnchor = new GPoint(31, 8);

var map = new GMap(document.getElementById("map"));
map.addControl(new GMapTypeControl());
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

map.addOverlay(new GMarker(map.getCenterLatLng(), icon));

Check out our example Thanksgiving site for a more elaborate example.

Feel free to spruce up your site with our turkey icon… Thanks to Dennis Hwang (who creates Google's holiday logos) for the turkey image.