A little project that I finished relatively recently was this map and directions page for Tutt Library, using Google Maps.

To create the map, I used the Google Maps API. You sign up for a key to the API which then lets you place Google maps on pages your pages. Google Maps doesn’t have a geocoding component, so to find out our location, I started with lat-long.com. Lat-long has locations for colleges and universities, so that got me close, but then I asked around and a colleague had a GPS device so we got the coordinates from right in front of the building.

Google has what looks like pretty complete documentation for the API, but I confess that my JavaScript isn’t all it could be. After several go-rounds of doing the programming-language equivalent of just speaking English louder and slower when in a foreign country, I started to look around for some code to copy. I’m sure that any idiot could read Google’s documentation, and convert their “place 10 random points” examples to “place one very special point right where I want it,” but I’m not just any idiot.

So I found a nice, simple, real-world example at the Thomas Ford Memorial Library, designed not-so-coincidentally by Aaron Schmidt of the library blog Walking Paper.

I made one further refinement to the Tutt map page by putting the map in an <iframe>, something I’d never used before. The Google Map API key is granted only for a particular directory on your site. In itself that isn’t a problem, but the URL is case-sensitive. That means that, according to Google Maps, http://www.coloradocollege.edu/library/about and http://www.coloradocollege.edu/library/About are two different directories, and the key will only work with the one you registered with Google. That is a big problem for me, as our directories typically have capital letters, but we don’t always use them in links. Grrr.

The way around that is to put the map itself in an <iframe> so you can control the exact URL used to reference the map, and the URL used for the surrounding page doesn’t matter so much. I’m not sure where I learned that hack; I think I found reference to using iframes on several pages, then tried the idea on my own.

Last, I added the driving directions section (which doesn’t require an API key) using the technique described here which I found via librarian.net.

I tried to cover all the browser problems (Google Maps wants new browsers, need to have JavaScript enabled, etc.) with a link to the less-sexy MapQuest.