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


Hacking Maps with the Google Maps API
by Hari Gottipati | Pages: 1, 2, 3

Getting an API Key

Unfortunately the key is limited to the website's particular directory that you tell Google about, and you can only register the key to valid website addresses. Even though this is a JavaScript API, you cannot simply develop and test an app based on it without a web server. To get a key you need to provide the URL, and that key only works with requests from that URL. It will not even allow the requests from another directory of the same site. If you tell Google you want a key for http://www.gmap.example/mysite, your key is valid for http://www.gmap.example/mysite/, http://www.gmap.example/mysite/mypage.html, and http://www.gmap.example/mysite/page?arg=foo. But it's invalid for http://gmap.example/mysite/mypage.html, http://differenthost.gmap.example/mysite, and http://www.gmap.example/mysite/mysubdir/page.html.

Visit Google's sign-up page and get a key for your website. You need to have a Google account to get the key. The whole API is available through one JavaScript file (which may be using other JavaScript files). Include the following file in a SCRIPT tag with the key you generated (assume the key is "abc123"):

<script src="http://maps.google.com/maps?
  file=api&v=1&key=abc123" type="text/javascript"></script>
Creating Display Points on the Map

The GMap class represents the map, and it has the methods to center and to zoom the map. Also it lets you add the move and zoom controls on the map. With this class you can default the map to show a particular area -- in our case, the city of Irving. This map can be embedded in a div element and you can control the size of the map by setting the height and width of that div element:

<div id="map" style="width: 800px; height:

Create the point with the long-and-lat of the Irving address we got from the geocoder:

var point = new GPoint(-96.926791,32.863917);

Next we create the instance of GMap by passing the div element we just made:

var map = new GMap(document.getElementById("map"));

We want the move and zoom controls, so let's add them too, but we have some choices. We can add the large pan/zoom control used on Google Maps (GLargeMapControl), the smaller pan/zoom control used on Google Local (GSmallMapControl), or the small zoom control, with no panning controls, used in the small map blowup windows (GSmallZoomControl).

Let's add one of these controls to our map:

map.addControl(new GLargeMapControl());

We also want to add the control which allows users to toggle between map and satellite view:

map.addControl(new GMapTypeControl());

Finally we set the default or initial starting point of the map, as well as zoom to the right level of magnification, which you can discover through trial-and-error. We use the point we created earlier.

Map.centerAndZoom(point, 6);

What have we done so far? We've made an 800 X 500 map, which will display Irving, Texas. (See Listing 1 for source code so far.)

3. Identifying the Overlay Locations

Once you have the map in place with a default area, it's time to identify the locations to display. If your app needs dynamic locations, then you need to write code to get them on the fly: take user input, convert to long-and-lat with a geocoder service, and so on. For example, HousingMaps gets the locations of properties for sale or rent from Craigslist on the fly, and converts and displays them. In our example, we want to identify city parks in Irving, Texas. The best place to find information about those parks is from the City of Irving's website. Once you have the park addresses in hand, you have to use that handy geocoder tool to get their longs-and-lats, as we already did earlier.

Let's get the long-and-lat for the first park, the Austin Recreation Center, which is at 825 East Union Bower Road, Irving, Texas 75061. The Geocoder returns -96.936574/32.822129.

Let's make another GPoint:

var point = new GPoint(parseFloat(-96.936574),parseFloat(32.822129));

Overlays are objects on the map that are tied to longitude and latitude coordinates, so they move when you drag/zoom the map around, and when you toggle between Map and Satellite modes. To overlay the location on the map you need to create a GMarker with longitude and latitude information. The marker is a type of map overlay that shows an icon at a single point on the map. The constructor takes the point at which it should be displayed and an optional instance of GIcon.

Let's create the marker with this point:

var marker = new GMarker(point);

Add the marker to the map in order to display this location on the map.


Repeat the process for all parks manually, or you can load the parks information from an XML file and use the GXmlHttp class (which creates cross-browser XMLHttpRequest instances) to load on startup.

Let's say you have all parks information in parks.xml and it looks like this:

  <park><point lng="-96.936574" lat="32.822129"/></park>
  <park><point lng="-96.9330679" lat="32.871815"/></park>

You can create an XMLHttpRequest via the GXmlHttp.create() method:

var request = GXmlHttp.create();

You can load parks.xml:

request.open("GET", "parks.xml", true);
request.onreadystatechange = function() {
  	if (request.readyState == 4) {
    	    var xmlDoc = request.responseXML;

Now let's extract the point elements out of the XML document:

var points = xmlDoc.documentElement.getElementsByTagName("point");

We can loop through the points to get the long-and-lat of the each point and create a GPoint:

for (var i = 0; i < points.length; i++) {
     var point = new GPoint(parseFloat(points[i].getgetAttribute("lng")),

Now we create the marker and add it to the map inside the loop.

var marker = new GMarker(point);

(For complete source code for this step, see Listing2.)

Pages: 1, 2, 3

Next Pagearrow