Google Maps-based directions pages

Two-sentence description

Static map images and one-size-fits-all directions to communities just didn’t cut it any more. The Google Maps API offered me a better solution for Quadrant’s directions pages.

Background

For years, Quadrant Home’s community mini-sites had a directions page consisting of a stylized map of the area and written directions to the site. The map image was a fixed size and the directions provided were generic, usually “from the south” or “from the north” from the nearest major freeway.

Though it provided the bare necessities, this approach was already outdated in late 2007: consumers were used to zooming into and panning around maps, not to mention getting turn-by-turn directions, traffic overlays, and other information provided by mapping services. And with the publication of Google Maps’ API and free use, it made sense for me to upgrade directions pages. (An API is an “application programming interface,” which essentially means a published specification of how to use a programming framework.)

Skills and technologies

Creating interactive community-directions maps was one of my first projects working with external javascript libraries. First, I explored the options available through the API, such as centering the map on a point, setting zoom levels, determining which map controls were visible, and converting addresses into geographic locations. Next I created a new directions page for a test community that contained a larger map area, a “pin” bearing Quadrant’s logo indicating the community’s location, and a form for the visitor to enter their location. When submitted, the form populated the page with turn-by-turn directions as well as drawing the route on the map. Thirdly, I presented the my prototype to my manager who—understandably—had some reservations about introducing what was then cutting-edge technology into such an important aspect of a community’s mini-site: how to get there. In response, we agreed to leave the original static map page available for users who preferred it.

The implementation phase required me to add additional attributes to Quadrant’s PostgreSQL-based database: latitude and longitude, which we obtained by visiting each community sales office with a GPS device. (Google now offers a geocoding web service, but that was not available when I created these maps.)

Once part of the database, I pulled each community’s geolocation and fed it to the javascript code on the new Google Map-based directions pages. In this way, I was able to create a single template that displayed the proper map and data for each community. And as an added benefit, I added a “widget” to the page displaying the community’s coordinates for visitors to get directions on their own GPS devices that might not yet have a new community’s address in their databases.

A note: the current implementation of the directions pages omits the turn-by-turn directions because Google’s directions are often wrong for the communities. By their nature, new home developments are often not yet included in mapping databases. After a few weeks of customer complaints of roundabout or just plain incorrect directions, the standard written directions were brought back.

Take aways

This project demonstrated to me the usefulness of keeping up on trends in your field; in this case, web development. I’d seen Google Maps and loved it, and noticed when mention of the API appeared on web development blogs I read. By taking some initiative and seeing what was possible, some “see how cool this is” project provided real-world improvements for visitors to a site I managed. Similar serendipitous benefits would later come to projects I worked on at the UW when I began fiddling with jQuery.

The later revision to the pages to remove the cool turn-by-turn directions feature was hard because I liked it. But clearly, it was a detriment to the page’s purpose, and so rightfully had to be removed. Once again proving the old adage “the customer is always right” (and probably another one about doing extensive testing before releasing a feature!).