Until this week, I hadn't experimented much with the Google Maps API. Sure I was a heavy user of the web interface and the map integration built into the iPhone, but didn't tinker with the nitty gritty details yet. I decided that since I'm working on an updated version of the website for my parent's restaurant I may as well try something new. With much of the site well underway, one of the missing sections was the contact page. My thinking was that I could create your run of the mill contact page and then for people that aren't familiar with the area, well, let them enter their address and allow Google Maps to do the rest. Easier said than done as usual.

Using my standard design philosophy, I developed the contact page in Photoshop and after shuffling some of the graphics around, I think things turned out pretty well. Here's a screenshot of the design I laid out in Photoshop.

Simple and too the point, but with style I thought. That design probably consumed about two hours of my evening, but once that was done, things developed quickly. I took the design image and began extracting all the necessary graphic elements so that they could be neatly placed in some eagerly awaiting <> brackets (e.g., HTML). Here's the end result after porting it from design to reality.

Complete with a vCard and its very own GMaps icon, the page was nearly complete and took all of about 3 hours. In my opinion, Google has done a tremendous job in making exposing a robust API making their map data widely accessible. Thanks Google!

With that out of the way, my remaining task was to develop a page that provides step-by-step instructions after the users enters their start address. That my friends was a lot harder than I had original thunk. There were a couple things that muddied the water, primarily the following:

• Google Maps does not have good data for the area where the restaurant is located therefore all directions had to be geocodes.
• Google Maps GDirections class is easy to use, but is not very extensible from a styling perspective in the sense that the HTML produced for directions contains inline CSS and is hard to manipulate without a fair bit of work.
• Using the available classes, functions, and methods available in Google Maps API reference documentation allowed me to re-create the directions, but this took quite a bit of effort and troubleshooting.

Well, after about 4-6 hours of tinkering while the girlfriend was peacefully sleeping, I finally had it working. Here's what the final product looks like.

After I had the directions working properly, I went ahead and cleaned up the train wreck of hobbled together javascript code I was using and massaged the CSS a bit to make it work across IE, Firefox, and Safari. I even added in a pinch of flavor by using the BlindDown effect from the Prototype library for when the directions are displayed to the end user.