Tuesday, October 07, 2008

Google Maps With How To Guides

Once or twice a week I get e-mails from readers who are trying to develop a Google Maps Mash-up and need help with something they are stuck on. Invariably my small brain is unable to solve their problem. I therefore usually redirect them to the Google Maps API Group, where people with much bigger brains than me are nearly always able to answer their questions.

Over the course of a week I must also look at hundreds of different Google Maps Mash-ups and often find myself wondering how some of the cool features have been achieved. Sometimes the developers are nice enough to provide 'how to' tutorials.

RevaHealth map
RevaHealth.com is an on-line searchable database of healthcare providers. RevaHealth.com decided that they would like to show the location of healthcare providers on Google Maps. They also decided that dynamic Google Maps take too long to load so decided to use Google Static Maps instead.

However, whilst Static Maps are faster to load, they are also, unsurprisingly, rather static. RevaHealth.com wanted to display information over the static markers when users moused over the marker or when they choose an option from a sidebar. They therefore decided to develop their own function for Google Static Maps.

RevaHealth.com's new function changes static markers into dynamic markers. This function is a great addition to the Google Static Maps API and I'm sure lots of developers will be interested in how to do the same thing. Generously RevaHealth.com have provided a tutorial on their blog called How to Make Google Static Maps Interactive.

Google DevFest

Google have produced a wonderfully colourful Google Map showing the locations in Singapore, Bangkok, Ho Chi Minh City and Manila of the DevFest tour. The finished map looks fairly straightforward; the venues of the DevFest tour are shown on the map and also listed in a sidebar.

However the map has a couple of neat tricks. The data for the map is loaded from a "geo-tagged" calendar feed and the markers have a mouseover effect that creates a different random Google colour to the sidebar elements.

Anyone who wants to know how these two tricks were achieved can read a quick how to guide on the ...And Other Fancy Stuff blog.

1 comment:

Pamela Fox said...

Thanks for the link- Always remember to check the demo gallery for the API as well:

There are no guides for the demos there, but the code there is generally easy to read and understand.