XML.com: XML From the Inside Out
oreilly.comSafari Bookshelf.Conferences.


Hacking Maps with the Google Maps API

August 10, 2005

Google didn't get around to releasing the documentation of its maps API until relatively recently, but many developers were experimenting with the service as soon as it went into public beta. I built the Irving, Texas (a suburb of Dallas) parks demo before the API was publicly documented. In addition to providing a useful service, Google also reinvigorated web user interface expectations, as has been widely noted. In particular, being able to fluidly drag and zoom maps from a web browser is an engrossing feature for the user.

Google Maps API

The Google Maps API is based on JavaScript, which makes life pretty easy, since you don't need to worry about installing software. You can directly run JavaScript in just about any web browser. Knowledge of XML and XSL helps to build a rich user interface, but it's not required. Google Maps currently supports Firefox 0.8+, Mozilla 1.4+, IE 5.5+, Safari 1.2+, Netscape 7.1+, Opera 7+, but E 5.0 is not supported. You can use the global method GBrowserIsCompatible() to check compatibility and show user-friendly error message for non compatible browsers.

There are several limitations to the Maps API:

  • It doesn't provide a geocoding service; that is, you have to provide it with longitude and latitude. This means you need to rely on third-party geocoding tools to get longitude and latitude for an address.
  • It doesn't include a routing or driving directions service.
  • The Google Maps API key is restricted to generate maps only for URLs (website or a local host). You need to have a web server even for development.
  • The key you receive is only valid for a single directory on your web site.
  • It can be used for commercial purposes, but it should be available to end users for free.
  • It can be used on a site that is password protected, but consumers should be able to sign up for a password without charge.
  • Usage is not necessarily restricted, but if your site is getting more than 50,000 hits per day, you'd better contact Google.

Yahoo also has a mapping API, with some significant differences. The Google Maps API requires long-and-lat, while Yahoo offers a geocoding facility.

Google maps API Yahoo maps API
Accepts longitude and latitude only, no geocoding Provides geocoding
Maps can be generated on, or for, any site Maps will be generated only on a Yahoo site
JavaScript XML (based on geoRSS 2.0) API
Ajax support No Ajax support
Zoom in, Zoom out, move by mouse Zoom in, Zoom out, move by clicking links
Can use for commercial purposes, but should be freely available to end user Can use for commercial purposes, but should obtain written permission
Can add plain text or HTML or XML with XSL or show blowup of the map in a display window Can add custom link, and/or custom image, or can display HTML in an IFRAME inside display window
Usage is not restricted up to a reasonable upper bound No usage restriction
Currently in beta Not beta, stable release

Developing a Map Application

To develop a Google map application, you need to go through the following five steps:

  1. Find a geocoder tool which gives the long-and-lat from an address.
  2. Identify the state or city or street you want to display by default (i.e., the starting point) and the default zoom level.
  3. Identify the locations you want to mark on the map.
  4. Decide what icon to represent the location on the map.
  5. Decide what information to display when the icon is clicked.

In order to demonstrate taking these five steps, we're going to work through the app I built, which maps the public parks in Irving, Texas.

1. Finding a Geocoder Tool

There are several free geocoder tools which provide the long-and-lat of an address. In order to integrate one of these services into a web app, you can use the Perl module Geo::Coder::US. As its name implies, it only works for US addresses. But it's free, and you can use Perl and JavaScript together in a web app. It's up to you to decide whether you need static data or dynamic data. But to keep things simple, we're going to use static data here. In fact, let's use geocoder.us/, which is based on Geo::Coder::US.

2. Identifying the Default Area

It's pretty easy to identify the default area, since it depends on what your mapping app is meant to accomplish. In our example, the default area that needs to be displayed is Irving, Texas. So we need to figure out the long-and-lat for Irving. Geocoder tools may not provide longitude and latitude based only on the city and state. You may need to provide a valid street address in the city; however, some tools will provide long-and-lat for a ZIP code. Once you get the right coordinates, you can zoom the map to display the whole city.

So we'll use the address 1698 Rochelle Blvd, Irving, TX, 75039, which has coordinates Longitude: -96.926791, Latitude: 32.863917. Now it's almost time to start using the Maps API; but first we have to get access.

Pages: 1, 2, 3

Next Pagearrow