Hacking Maps with the Google Maps API
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:
- Find a geocoder tool which gives the long-and-lat from an address.
- Identify the state or city or street you want to display by default (i.e., the starting point) and the default zoom level.
- Identify the locations you want to mark on the map.
- Decide what icon to represent the location on the map.
- 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.
