Google Maps API 3

CHAPTER 6 ■ MARKER ICONS
A Clever Way of Dealing with Lots of Different Marker Icons
In some applications that use a lot of different marker icons on the map, managing these icons can be a
problem. You have to define a new MarkerImage for each different marker type, and you will have a
massive if clause to handle which MarkerImage to use in each particular case.
One technique to make all of this more manageable is to store all your MarkerImage objects in
an array.
You previously learned that each item in an array has an index. In JavaScript it’s possible to use a
more descriptive label than an index to mark each item. This is called an associative array. What it means
is that instead of getting an array item by its index number, you can get it by its label.
var fruit = [];
fruit['apples'] = 20;
fruit['oranges'] = 10;
fruit['bananas'] = 15;
To access the number of oranges, you simply call the array with the label oranges.
fruit['oranges']; // returns 10
You’ll utilize this to manage your MarkerImage objects. In this example, you’re going to plot weather
onto a map. To do this, you’ll need several different icons that indicate what the weather is like (see
Table 6-5). You’re just going to use three different weather types for the brevity of the example, but as
you can imagine, if this were a real weather map, you would need a lot more.
Table 6-5. Weather Icons
Icon Weather Filename
Cloudy weather
clouds.png
Rainy weather
rain.png
Sunny weather
sun.png
These are just a few of the icons available in the Tango Weather Icon pack, which is free for
commercial use. You can download it from http://darkobra.deviantart.com/art/Tango-Weather-Icon-
Pack-98024429.
You start by defining the array that will contain the icons:
var weatherIcons = [];
Now that you have an array, you will start adding MarkerImage objects to it. Let’s start with the
clouds icon:
122