Ajax Hacks: Tips & Tools for Creating Responsive Web Sites

Create applications that combine Google Maps and your own server components.

For map lovers and developers, perhaps the only thing cooler than Google Maps is the Google Maps API. The API allows developers to invent new Ajax-style applications with Google Maps. It is made up of JavaScript objects and methods that let you control the appearance of maps on web pages, add controls to them, and create new clickable behaviors.

To use the API, you have to first obtain a developer's key from Google. This is very easy. Simply go to http://www.google.com/apis/maps/, specify the web site that will use Google Maps (such as http://www.parkerriver.com), and click on a form button, and Google generates a key for you. This is a long bunch of alphanumeric characters, such as:

CDROAAAANJd_PEMs2vnU_f04htHhZhSa_9HZXsWbc66iRLah8f17kmN8QRSryZ54UMgeX7XabY zm82xuubmjRb

Google Objects

You specify the key in your web page when your script tag imports Google's JavaScript library for Google Maps. Here is what the top part of an HTML page looks like when enabling the Google Maps API, including the key specification:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="/books/4/254/1/html/2/http://maps.google.com/maps?file=api&v=1&key=ABQIAAAANJd_ PEMs2vnU_f0RhwHhZhSa_9HZXsWbc66iRLah8f17kmN8QRSryZ54UMgeX8GjfYzm82xuubmjRw" type="text/javascript"></script>

The result of importing this script with a proper key is that your own JavaScript code can now access the objects that are part of the Google Maps API. These include the following:

  • GMap, an object that allows you to embed a digital map with zooming controls inside of a block-type HTML element, such as a div

  • GMarker, an icon that points to a specific place on the map

  • GPolyline, which can overlay shapes onto a map

  • GPoint, representing a map coordinate

  • GXmlHttp, a "wrapper object" for our familiar XMLHttpRequest object

All these objects except for GPolyline are used in the next two hacks. In addition, the API includes GXml and GXslt objects for parsing XML and using XSLT technology.

As mentioned in Chapter 1, XSLT is a templating language for transforming the information embedded in XML files.

The API also includes a general-purpose function, GBrowserIsCompatible( ), which returns TRue if the user's browser supports Google Maps. As of November 2005, according to the Google documentation, Google Maps supported recent versions of Firefox/Mozilla, IE 5.5+, and Safari 1.2+, and "sort of" supported Opera. It did not support IE 5.0.

"Use the Google Maps API Request Object" [Hack #29] and "Use Ajax with a Google Maps and Yahoo! Maps Mash-up" [Hack #30] show how to use the Google Maps API. Visit the above-mentioned URL to obtain an API key, take a look at the developer's documentation at http://www.google.com/apis/maps/documentation/, and start cracking!

Related

Категории