202 Part III — Google Map Hacks
Remember that image sizes are specified in pixels, not latitude and longitude. Also remember
that you should scale your icon and shadow by the same value to retain the correct aspect ratio.
For example, if your icon image is 210 pixels high but you want it to be just 22 pixels high on the
map, you should also divide the width of the image by the same factor to get the icon widths.To create the icon within Google Maps, specify each of these parameters for a new GIcon
object. For example:
baseIcon = new GIcon();
baseIcon.image = “/examples/Pushpin.png”;
baseIcon.shadow = “/examples/PushpinShadow.png”;
baseIcon.iconSize = new GSize(31,33);
baseIcon.shadowSize = new GSize(57,33);
baseIcon.iconAnchor = new GPoint(16,33);
baseIcon.infoWindowAnchor = new GPoint(31,38);
baseIcon.infoShadowAnchor = new GPoint(31,38);The shadow image specification is not required, although Google has suggested in the past that
it might become a compulsory element. You can actually omit either the shadow or the original
icon, which can lead to some interesting effects, without any error being raised. If you want an
icon without a shadow but the shadow becomes compulsory, just use a completely transparent
image for the shadow.Putting the Icon on a Map
Putting the icon onto a statistical map is relatively easy. The first stage is to modify the
addmarker()function to accept an icon object as an argument. Then you use this icon when
a marker is added to the map:
function addmarker(x,y,title,icon) {
var point = new GPoint(parseFloat(x),parseFloat(y));
points.push(point);
var marker = new GMarker(point,icon);
map.addOverlay(marker);
markers.push(marker);
titles.push(title);
infopanel.innerHTML = infopanel.innerHTML +
‘<a href=”#” onClick=”movemap(‘ + index + ‘);”>’ +
title +
‘</a><br/>’;
index++;
}Specifying an icon to GMarker()places that icon on the map at the anchor point you defined
when the icon was created at the latitude and longitude defined by the marker.