Archive for the ‘Google Maps’ Category

Adding custom icons to Google Maps

Sunday, February 1st, 2009

I have just been putting together a website  for Stow-on-the-Wold’s Cotswold Festival in September 2009.  One of the pages includes a map of Stow showing the Town Square and the various parking options for the festival.  I used Google Maps for this page.

Now Google Maps is a wonderful product, very powerful and well documented, but I don’t always find it easy to figure out how to do what I want to do.  So I thought I’d try to make it easier for next time by documenting the issues I came across.

My first problem was creating custom icons for the carparks, I found a suitable graphic but Google Maps has a very smart shadow associated with each icon.  Fortunately I found shadowmaker which made creating the shadow effect very simple indeed, it even provided the code to be included in my webpage.  Thank you very much to Erwin Bolwidt!

Next I wanted to display the custom icon but with a tooltip type title which would give some descriptive text when a mouse rolled over the icon.  Both the icon and the title are options for GMarker, but I had some trouble figuring out how to include more than one option (I’m not very bright really).  The solution is quite straight forward really, just create a new variable which contains all the options (I could also have listed the options in the new GMarker call but that would have been messy).  As you can see I took the opportunity to add a 3rd option to make the icon non-clickable.


// Place parking icon for Maugersbury Road
var Parking3Opts = {title: "Pay and display car parking on Maugersbury Road",
clickable: false,
icon: Picon};
var Parking3Coordinates = new GLatLng(51.927500, -1.718300);     /* position of carpark */
map.addOverlay(new GMarker(Parking3Coordinates, Parking3Opts)); 

That was the map sorted out but I wanted to add a little legend outside the map.  Obviously putting in my

Icon for car parks on my Google Map icon on the page wasn’t a problem, I had a copy of that.  But the default GMarker for Google Maps was more elusive, I had real trouble finding a copy of it.  Eventually I did find one here , thank you Korben. So I include a copy of Korben’s image here so others can download it gmarkerI’m sure the icon is available from Google somewhere but I couldn’t find it.

That was it for my map (so far), I hope that this makes the process a little easier for the next person who is mystified by the Google Maps API.