Google-driven Web Development, Chapter 4

Google Maps

For the Google Maps preview portion of our tour of Google-driven Web Development, I thought I'd give you a bit longer section this time. I want, too, to highlight some of the things about the Maps API that can be useful outside of just building mapping applications. The Google Maps script can be used as a library without creating a full-blown mapping application. Geocoding and XMLHttpRequest handling are two uses that quickly spring to mind.

Geocoding

Until very recently, Google Maps did not provide any geocoding service. Developers were forced to call out to other web site APIs, or worse, look up an address by hand, to convert a postal address into a set of geocoded latitude and longitude points. The Maps API now provides this much needed functionality with GClientGeocoder().

  var client = new GClientGeocoder();
  client.getLatLng('1600 Amphitheatre Parkway, Mountain View, CA', 
      doSomething);

  function doSomething(point) {
      map.setCenter(point, 3);
  }

Here, we're using a callback function to center our map on the GPoint returned by getLatLng. getLatLng is pretty tied to Google Maps, but for more detailed gecoding data, which could be used independently of Google Maps, use getLocations.

  var client = new GClientGeocoder();
  client.getLocations('1600 Amphitheatre Parkway, Mountain View, CA', 
      myParser);

  function myParser(data) {
      //Do something with the returned data here
  }

getLocations returns a JavaScript object, in the form of JSON, with extended address information. The data returned for our Google headquarters search looks like this.

  {
    "name": "1600 Amphitheatre Parkway, Mountain View, CA, USA",
    "Status": {
      "code": 200,
      "request": "geocode"
    },
    "Placemark": [
      {
        "address": "1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA",
        "AddressDetails": {
          "Country": {
            "CountryNameCode": "US",
            "AdministrativeArea": {
              "AdministrativeAreaName": "CA",
              "SubAdministrativeArea": {
                "SubAdministrativeAreaName": "Santa Clara",
                "Locality": {
                  "LocalityName": "Mountain View",
                  "Thoroughfare": {
                    "ThoroughfareName": "1600 Amphitheatre Pkwy"
                  },
                  "PostalCode": {
                    "PostalCodeNumber": "94043"
                  }
                }
              }
            }
          },
          "Accuracy": 8
        },
        Point: {
          coordinates: [-122.083739, 37.423021, 0]
        }
      }
    ]
  }

This bit of JSON contains a lot of additional information, but it also makes parsing the latitude and longitude points easier when using this feature outside of Google Maps. This could be useful indeed, and hopefully, you're starting to get a sense for how Google's tools and APIS can be used for web development more generally, rather than just in a single application context.

One of the most interesting and useful cases for this is when dealing with XMLHttpRequest objects.

XMLHttpRequest Handling

In earlier chapters, we've been through how to create and use XMLHttpRequest objects. This is not difficult, but requires a few lines of code to get working properly. The maps API can act as an XMLHttpRequest library, abstracting out the functionality into a simple object and methods.

To request a file from your server:

  GDownloadUrl('/files/testpage.html', handleData);

  function handleData(data) {
      alert(data);
  }

GDownloadUrl is even smart about the data that is returned. For HTML or text, the data is returned as plain text as sent by the responseText. If the file were XML, the data is XML as returned by the responseXML of XMLHttpRequest. The XML would then have to be parsed, but this can be done by GXml, also provided by the maps API. Consult the docs for complete details, but these methods do provided easy access to XMLHttpRequest even if you're not working on a map application per se.

All you need to do to take advantage of this and the other special features mentioned above is link the maps API script into to your current web page. You don't have to be creating a map to take advantage of all the useful features of the Google Maps API.

That's all the maps goodness we have time for this week. Next preview: this coming Wednesday. We'll look at open source software from Google. Until then...

Posted by deryck on February 20, 2007

Post a comment