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.

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

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:

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

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.