Introduction to the Google Maps API

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:

As you can see, the possibilities for combining Google Maps with other geographic information are practically endless.

Getting Started

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/maps1 and 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.

Setup

There is only one JavaScript file necessary for you to begin using the Google Maps API. Unlike other APIs, you can’t download the files locally. Instead, you’ll need to access the file located on the Google Maps server. This file must include the version and your key in this format:

http://maps.google.com/maps?file=api&v={version}&key={your key}

As of the time of my writing, the most current version is 1, so you’d use this URL in your <script/> tag:

http://maps.google.com/maps?file=api&v=1&key={your key}

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.

A 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:

Figure 1

Figure 1

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read