Introduction to the Google Maps API
By Nicholas C. Zakas
When Google Maps (
http://maps.google.com) first debuted, it was the victim of numerous hackers. People were enthralled with this next-generation Ajax application that did things no one had ever seen done before. Developers from around the world wanted to know how it worked and how they could use it to their advantage. Though not damaging in any way, these early Google Maps hackers opened the eyes of the folks in Mountain View, CA, and soon the Google Maps API was released to the public.
Using the API, numerous people have created useful and interesting "mashups", combining the Google Maps interface with geographic information from other data centers. A few examples are:
- Chicago Crime (
http://www.chicagocrime.org/) - uses Google Maps to visually locate places where crimes have occurred in the Chicago area.
- Housing Maps (
http://www.housingmaps.com/) - combines Google Maps with classified ads from Craigslist to display location of properties for rent or sale.
- Incident Log (
http://www.incidentlog.com/) - combines Google Maps with crime and incident data from around the United States.
- Cell Phone Reception and Towers (
http://www.cellreception.com/) - combines Google Maps with locations of cell phone towers.
As you can see, the possibilities for combining Google Maps with other geographic information are practically endless.
To begin, you need to have a Google account (such as to access Gmail). If you don't have a Google account yet, go to
http://www.google.com/accounts/ for information on how to sign up. The next step is to go to
http://www.google.com/apis/maps/signup.html to sign up for an API key. To do so, you must provide a URL indicating the location at which the API will be used. This location is a specific directory on your server; so
www.mydomain.com/maps2 would each require separate keys.
Keep in mind that there are some limitations to using the Google Maps API. First, you're limited to 50,000 page views per day. If you believe your site will be receiving more page views, you'll need to contact Google to discuss it. Also, you are not allowed to obscure any attributions or ads that appear within the map window. The other caveat is that whenever Google releases a new version of the API, you must update your site within a month to use that new version before the old one disappears. As such, it's probably not a good idea to rely on Google Maps for very important uses as of yet; once the API has been more fully developed, it will be a bit safer. In the meantime, though, it's certainly fun to experiment with.
As of the time of my writing, the most current version is 1, so you'd use this URL in your
Next, you need to create an area in which to place the map. To do so, place and style a
<div/> tag so that it is located where you'd like the map to appear. There are then two steps that need to be completed: creating a
GMap object and centering the map on an initial point. Each of these steps is remarkably easy.
Suppose you have a
<div/> with an ID of "divMap", you can create a
GMap object like this:
var oMap = new GMap(document.getElementById("divMap"));
This step essentially initializing the map control. At this point, though, nothing is displayed in the map area; you need to give it an initial set of coordinates to center on. To do so, use the
centerAndZoom() method, with accepts two arguments: the
GPoint object to center on and the zoom level.
GPoint object contains the latitude and longitude
geocodes for a specific location in the world. To create new
GPoint object, just pass in the coordinates:
var oPoint = new GPoint(iLat, iLong);
This point can be passed in to
centerAndZoom(), along with a zoom level, to set the initial display of the map (you need to specify both a center and a zoom level initially, after that you can modify just one or the other if necessary). The zoom level is an integer between 0 and 17, where 0 is street-level and 17 is world-level.
The center of the United States can be given as latitude -92 and longitude 32 (somewhere around Kansas City, Kansas), and all of the country can be seen at zoom level 14, so the following code will setup the map to view this area:
oMap.centerAndZoom(new GPoint(-92, 32), 14);
This yields a map that looks like this: