Effective Use of Custom Icons in Google Maps

I’m currently developing a web application that uses Google Maps and have lots of markers with custom icons to mark different things on the map. To administer all these different icons is quite a chore and it took me some time to find an effective way of working with them.

The problem

At first I coded each custom icon individually, creating massive amounts of code. I then had to have a huge If-else statement to determine which icon to use on each type of marker. This didn’t feel right and also made the application unnecessarily bloated and redundant, so I started looking for a better way of doing this. Eventually I stumbled upon this solution in one of Mike Williams excellent Google Maps tutorials.

The solution

The solution is all about storing the icons in an associative array that you later on call to get the correct icon.

Defining the icon

Start of by defining a “template”-icon that you base your other icons on.

var custIcon = new GIcon(G_DEFAULT_ICON);
custIcon.iconSize = new GSize(16, 16);
custIcon.shadowSize = new GSize(0, 0);
custIcon.iconAnchor = new GPoint(0, 0);

I’m using the optional copy argument in the GIcon constructor. You don’t have to do this but it’s convenient since all the properties of the icons are otherwise empty and you have to manually define them yourself.

Note: To learn more about how markers and icons works in Google Maps read the section on overlays in the Google Maps API documentation.

Creating the array

The next step is to define an array and start adding icons to it. Since it’s an associative array I use labels instead of numbers to identify each item.

Also notice that I add my template icon and a specific image for each individual icon in the GIcon constructor.

var myIcons = [];
myIcons['house'] = new GIcon(custIcon, 'house.png');
myIcons['castle'] = new GIcon(custIcon, 'castle.png');

Putting the array to use

Later on when you want to place a marker in the map and assign it one of your custom icons you just write this.

var marker = new GMarker(point, { icon: myIcons['house']});

In the application I’m currently building I give the array-items the same label as the type they represent. So instead of using a huge if-else statement to get the right icon, I just have to write one line of code where I insert my type as label for the array.

var marker = new GMarker(point, { icon: myIcons[type]});

Simple, effective and elegant!

My Google Maps book

If you found this article useful you might be interested in my book Beginning Google Maps API 3. It covers everything you need to know to create awesome maps on your web sites. Buy it on Amazon.com

About the author

Gabriel Svennerberg is an independent Interaction/UI Designer and Web Developer living in Sweden. When he's not busy building web application designed for humans, he writes about all things web on his site In usability we trust. Gabriel is the author of the book Beginning Google Maps API 3 published by Apress.

interested

Sorry for being an idiot but how do you pass the type to the type variable?

var marker = new GMarker(point, { icon: myIcons[type]});

I have a column in my database that labels (e.g. 1 , 2, 3 ) locations. How do I pass that label to the type variable?

Thanks in advance.
http://www.svennerberg.com Gabriel Svennerberg

I don’t think I understand your question. Could you please elaborate?
interested

sorry for the confusion

My question was in your posting you said you use

var marker = new GMarker(point, { icon: myIcons[type]});

instead of

var marker = new GMarker(point, { icon: myIcons['house']});

I would like to know how you are passing the ‘house’ variable to ‘type’. Are you grabbing it from a database, xml or some other way.
http://www.svennerberg.com Gabriel Svennerberg
Ok, now I understand. Sorry for being so daft!

The data originates in a database but is served to the script through an AJAX call that returns JSON. Then I simply loop through the JSON object and pass the type to the icons array like this.
```
for(var i = 0; i < json.length; i++) {
    var point = new GLatLng(json[i].Latitude, json[i].Longitude);
    var marker = new GMarker(point, { icon: myIcons[json[i].Type]});
    // Do some more stuff to add the marker to the map
}
```
E

This tutorial just saved me from insanity. Thankyou for your code.
sergey

Hi!Thank you for your tutorials.
The question is: how many different icons can we use for one map to not cause delay while loading?
Joey

Thank You.
http://www.cliniccompete.com/dentists/implants.php vincenario

implemented this http://code.google.com/apis/maps/articles/phpsqlsearch.html on my site. I need help on how on how to implement the method u just explained above to use numeric icons which I have stored somewhere. Thanks inadvance.
Phil Mos

Mee toooo! Even though it is outdated it opened up some ideas to me that made my project possible. Thank you!