Hack 14. Create Custom Map Markers

Adding custom markers to your Google Map can enhance its readability and appeal.

Almost immediately after the Google Maps API announcement, Jeff Warren made a hack that used custom icons to do a map depicting Star Wars ATATs attacking Google's home town, Palo Alto, as shown in Figure 2-10. You can launch your own Imperial assault on Google's home base at http://www.vestaldesign.com/maps/starwars.html.

This hack immediately demonstrated the flexibility of Google's new API. If you wanted to use a house icon instead of the generic marker, you could. Likewise, if you wanted to make a multiplayer game using Google Maps, the API was flexible enough to allow you to let users submit their own icons.

To create an icon, you need two things: a foreground image for the icon and a shadow image in the PNG 24-bit file format. If you are only changing the color of the generic marker, you can reuse the generic shadow, but for this hack we're going to make something completely different.

2.6.1. Find the Right Foreground Image

Instead of doing something generic and boring, I decided to take a headshot of a friend of mine and turn it into a Google Maps marker icon! I grabbed a suitable shot from a digital photo, loaded it into Adobe Photoshop, and started erasing, as shown in Figure 2-11. About halfway through, I could tell this was going to make a great foreground image.

Figure 2-10. You too can send Imperial ATATs to attack Google's headquarters

If you're not into commercial software, the GNU Image Manipulation Program, or GIMP, offers an open source alternative with the same basic features. You can find the GIMP at http://www.gimp.org/.

Once I finished erasing around Karl's head, I scaled down the image, cropped it, and expanded the canvas to give Karl's head some breathing room. I wouldn't want him to get claustrophobic, and when we start working on the shadow, we're going to need a bit of extra room. You can see the finished result in Figure 2-12.

Finally, I went to the File Save for Web option, and saved my file in the PNG-24 format with transparency. 24-bit PNG format is ideal for custom map icons, because its lossless and the alpha layer support allows for some wonderful transparency effects.

2.6.2. Casting the Shadow

Now that you have the foreground image saved, you might want to show it on your map right awaybut don't run ahead yet. We're going to want to reuse our work to create a shadow image. This is an image that gets placed behind the foreground image to give it that 3D effect, like it's sitting on top of the surface of your map. Using a shadow is optional, but it gives your custom markers more depth and character. This step is a little more complicated, but definitely worth your time.

Figure 2-11. Erasing around the head to create the foreground image

Here's the rundown, again from Adobe Photoshop:

1. Image Adjustments images/U2192.jpg border=0> Brightness/Contrast

   Edit Free Transform

   Edit Transform images/U2192.jpg border=0> Skew

   Figure 2-12. The final version of the foreground image

2. Image Canvas Size

   Filters Blur images/U2192.jpg border=0> Gaussian Blur

   Layer Layer Style images/U2192.jpg border=0> Blending Options images/U2192.jpg border=0> Fill Opacity

   File Save for Web

   Figure 2-13 shows the finished shadow layer for the icon.

   2.6.3. Add Your New Icon to a Map

   Now that the two source images have been created, let's add them to your map. If we were making a generic marker, we would create an instance of the GMarker class, using a GPoint object as an argument. To create a custom marker on the other hand, we need to add an additional argument to the GMarker constructor, a GIcon object. Here is an example of how to use the GIcon constructor:

   Figure 2-13. The head has a shadowy background

    

   	var icon = new GIcon();
   	icon.image = "http://igargoyle.com/mapfiles/karol.png";
   	icon.shadow = "http://igargoyle.com/mapfiles/karolShadow.png";
   	icon.iconSize = new GSize(43, 55);
   	icon.shadowSize = new GSize(70, 55);
   	icon.iconAnchor = new GPoint(0, 0);
   	icon.infoWindowAnchor = new GPoint(9, 2);
   	icon.infoShadowAnchor = new GPoint(18, 25);
   

    

   The GSize object holds the size of your image. In this case, icon.image has a width of 43 pixels and a height of 55 pixels. The corresponding icon.shadow has a width of 70 pixels and is 55 pixels high. Specifying these image dimensions are critical, because if you don't, your photo will end up being distorted.

   The iconAnchor property stores the point on the icon, relative to the top left corner of our icon image, where it should be anchored to the map. The infoWindowAnchor property is similar, except it specifies the anchor point on the image of the information window. Finally, the infoShadowAnchor indicates where the drop shadow below the info window should be anchored under your marker. If your icon is shaped like the standard Ride Finder icons, you can leave it as it is; otherwise, you should use your image editor to figure out where these points lie on your custom icon.

   Finally, to add this to a new marker, you need to use the GMarker constructor with the GIcon as an extra argument.

   	var marker = new GMarker(point, icon);
   	map.addOverlay(marker);
   

    

   Figure 2-14 shows our custom map icon on a satellite map showing Burning Man.

   Figure 2-14. The disembodied flying heads all swarm to Burning Man

    

   So now that you know how to create an icon with both a foreground image and a shadow, break out your artistic skills and make your map uniquely different. You can make it look professional, stylish, or even silly, like I did. The message your map communicates will be all the stronger for it.

   2.6.4. See Also

   • Find some good, free, generic icons at http://brennan.offwhite.net/blog/archives/000211.html.

     Tom Longson