Google Maps API 3

CHAPTER 6 ■ MARKER ICONS
■ Note After a MarkerImage object has been created, it can’t be changed. Therefore, if you need to change it, you
have to discard it and create a new one.
Adding a Custom Icon to a Marker
Although the MarkerImage object contains properties that let you tweak it in different ways, in its
simplest form, you need to provide only the first property, url. Let’s call this variable recycle since it will
have a recycle icon.
var recycle = new google.maps.MarkerImage('img/recycle.png');
What you get is a plain icon (Figure 6-1). It’s nothing fancy, but you have a custom image.
Figure 6-1. A plain icon
Adding a Shadow
MarkerOptions has an additional property called shadow that works like icon. It also takes a MarkerImage
object as its value. You will add a link to an image of a shadow to the url property. The image looks like
Figure 6-2.
Figure 6-2. The shadow
It looks like it will fit nicely beneath the new marker icon. Let’s name this variable shadow and point
it to the image of the shadow:
var shadow = new google.maps.MarkerImage('img/shadow.png');
Putting It Together
Now that you’ve created objects for the marker and the shadow images, you can put it all together by
using them as values for the icon and shadow properties of the Marker object. This will create a marker
with a nice shadow that gives a 3D feel to the map (Figure 6-3).
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.756054, -73.986951),
map: map,
icon: recycle,
shadow: shadow
});
103