In usability we trust

UX and all things web

Effective Use of Custom Icons in Google Maps

Google MapsI’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

9 Comments

  1. 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.

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

  3. 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.

  4. 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
    }
    
  5. This tutorial just saved me from insanity. Thankyou for your code.

  6. 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?

  7. 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.

Leave a Reply to Gabriel Svennerberg Cancel reply

Your email address will not be published.

*