Fun With Google Maps API

I was a Geography major in college and I have always loved maps. I like looking at them and I like working with them. It is something I often have to do when I build web sites for small businesses, particularly those with physical locations that customers need to get to.

In the past, I always just put together a static map graphic and added a hyperlink to MapQuest or some other site for directions. Then I read about Google allowing people to tap into their maps API to display fully functional Google maps on their own pages. (I read about it in Quest Software's Knowledge Xpert for MySQL, of all things, the latest version of which includes a very nice tutorial on this subject.) Anyway, it's really pretty easy. Just a matter of signing up with Google to get a key and then adding some JavaScript to your page - not that dissimilar to Google Analytics, another wonderful and inexplicably free Google web toy.

To start, you need to register and get a key from Google. You need one key for each domain you want to put your map on. You can get a key here:

http://code.google.com/apis/maps/signup.html

Google will provide you with the code you need to drop into your page and they have loads of docs on the various options available to you. Alternatively, you can get some nice code from the aforementioned Knowledge Xpert product, which is free.

But it's straightforward enough. Some JavaScript in your HEAD, then a DIV tag where you want to actually place the map. You can include or exclude all the various controls like pan, zoom, Map/Satellite/Hybrid toggles, etc. It can be easily sized.

One thing that's not as obvious. Some of the Knowledge Xpert examples center the map using a Google geocode (the lat and long) for where you want the map to center on initially. Their instructions for obtaining that geocode for a specific address were a little fuzzy for me. As it happens, there is a URL that you can ping to get the code for any address. The example below finds the geocode for 810 Guadalupe Street, Austin (if you put in your google maps key at the end):

http://maps.google.com/maps/geo?q=810+Guadalupe+Street,+Austin,+TX&output=csv&key=your_google_key_here

To see the example where I used Google Maps, visit http://www.austinsms.org/meetings.php and have a peek at the source.

Knowledge Xpert also provides additional information on tying this into a MySQL database to store and map multiple locations, if you are so inclined.

Lots of fun to play with and a much nicer solution to providing a map on your web site.