198 Part III — Google Map Hacks
Creating the Icon
There is only one required element for a Google Maps icon: the icon itself. However, for clarity
(and style) icons normally also include a shadow. Both elements should have the following
attributes:They should be in the PNG format. Most graphics applications (including Adobe
PhotoShop and GIMP) support PNG. PNG is used because it provides 24-bit color
support and transparency. Transparency enables the icon to appear on the map as the
icon, effectively hiding the square image that you generate.
They should have the same height, although they can have different widths.The left edge of images should be identical. It is the combination of the height and the
left-hand edge that allows the icon image to be overlaid on the shadow image.
They must be placed on a transparent background.Ideally the width of the icon should be an odd number so that the middle pixel is pre-
cisely in the center.
The basic size of the icon should be appropriate to the map size. Designing an icon with
an image size of 400x400 pixels is not efficient when the image will probably be only
40x40 pixels on the final map. The exception is when adjusting the icon for larger sizes
(as in the statistics example) where better resolution will make a better icon when it is
scaled up.The height and left edge requirements are important because Google Maps aligns images from
the top left. If the icon and shadow were different heights or had different left edge orienta-
tions, the bottom and left edges would never line up.Putting the process in practice, you can build a simple icon and shadow to use on your map.
Figure 10-7 shows the basic layout of the icon and its shadow and why the left-hand edge and
height are so important.FIGURE10-7: Understanding the icon/shadow overlay.Height X Height X'Point' is at the same height
and distance from left edge