About Darkstar Design

Scott

July 5, 2006

Adding Dynamic Maps Using the Google Maps API

Filed under: Programming — Scott @ 2:50 pm

By now, millions of people have seen the latest incarnation of Google Local – maps. Google’s popular tool lets you find the closest pizza place, driving directions to your long lost cousin’s house, or a famous landmark seen from a satellite’s perspective. You can even plan your trip around mass transit (if you live in Portland, OR).

Maps are nothing new. Yahoo! and MSN both have maps, and MapQuest has been a popular engine for years now. There’s more than meets the eye to Google Maps, however. Google not only released this tool for you to use on it’s local search, they also released it as an API – that’s right, you can include a map of your own on your web page and drive it using some very simple Javascript.

There are quite a few possibilities with Google’s API. You can move the map around, create overlays, draw custom shapes, and even use some built in AJAX functions so you don’t need to load data for the whole map right away when you are only looking at a small portion of it.

Right now the tool is completely free and open – all you need to do is get a free key for your domain name (I’d pick up an extra one for localhost too) and you’re ready to go. We used this system with the Orenco Station website with great success.

Orenco Station is a community in Hillsboro, Oregon. The website was sponsored by the Orenco Station Business Owners Association and each business has the potential to create their own page on the site with a simple interface. We used the Google Maps API to generate a satellite image of Orenco Station with markers at each business’ location. This makes it easy for customers to find what they are looking for.

Powered by WordPress