Google Maps API 3

CHAPTER 2 ■ TRANSFERRING FROM VERSION 2 TO 3
Marker Icons
In v2, to change the default icon of a marker, you had to create a GIcon object and assign it to the marker
by using the icon property of the GMarkerOptions object. Alternatively, you could use the setImage()
method of the Marker object and pass a URL to an image as its parameter.
In v3 you have a few more options. You can set the icon directly using the icon property of the
MarkerOptions object, or you can set it later using the setIcon() method of the Marker object. In
both cases, you can choose whether to use a full-fledged MarkerImage object or simply to use a URL
to an image.
In v2 the GIcon object included everything about the marker icon, such as its shadow, its printImage,
and so on. In v3 this is handled differently. For example, the icon shadow is handled as a separate
property in the MarkerOptions object. It’s called shadow and also takes either a MarkerImage object or a
URL to an image as its value.
All the alternative icons you could define in v2, such as printImage, mozPrintImage, and transparent
are dropped, so you only need to worry about providing one image for the icon and one for its shadow.
In its simplest form, changing the marker icon requires that you only provide it with a URL for the
icon and one for the shadow. Well, you could actually omit the shadow property if you like. When
changing the default icon, the default shadow is also removed.
Version 2
// Create a custom icon
var myIcon = new GIcon(G_DEFAULT_ICON, 'icon.png');
// Create a marker and add it to the map
var marker = new GMarker(new GLatLng(54, 12), {
icon: myIcon
});
map.addOverlay(marker);
Version 3
var marker = new google.maps.Marker({
position: new google.maps.LatLng(54, 12),
map: map,
icon: 'icon.png',
shadow: 'shadow.png'
});
In v2 the GIcon object has a property called imageMap. It’s used to define the clickable part of the icon
and takes an array of integers as its value. In v3 this is defined by using the shape property of the
MarkerOptions object, which takes a MarkerShape object as its value. This object has two properties, type
and coord. The type property defines the kind of shape you would like to use, such as a polygon, circle, or
rectangle. The coord property takes an array of integers defining the points in the shape. It works just like
an ordinary HTML ImageMap.
Version 2
// Create a custom icon
var myIcon = new GIcon(G_DEFAULT_ICON, 'icon.png');
myIcon.imageMap = [4,4, 29,4, 29,29, 22,29, 17,35, 16,35, 10,29, 4,29, 4,4]
13