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