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
December 16, 2008 at 6:23 am
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.
December 16, 2008 at 10:25 am
I don’t think I understand your question. Could you please elaborate?
December 18, 2008 at 9:11 pm
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.
December 19, 2008 at 8:59 am
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 }April 17, 2009 at 10:09 pm
This tutorial just saved me from insanity. Thankyou for your code.
January 10, 2012 at 8:34 pm
Mee toooo! Even though it is outdated it opened up some ideas to me that made my project possible. Thank you!
October 11, 2009 at 10:50 am
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?
July 18, 2010 at 6:22 am
Thank You.
April 27, 2011 at 7:54 pm
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.