Who would have thought poring over a map could be so fun? Credit a loose-knit set of programming technologies known as Ajax. It’s helping to spur the explosion of Web sites, from Yahoo! Inc.’s (YHOO ) photo-sharing service Flickr to Google Inc.’s (GOOG ) Web-based e-mail service, that help you take a more active part in creating your own personal Web.

Essentially, Ajax speeds up the Web experience, vastly reducing the notorious World Wide Wait. A Web site created using Ajax updates pages behind the scenes, sending ancillary data you’re likely to want next — such as filling in map data surrounding the current view. No more clicking the mouse and waiting for the page to refresh. Says Jesse James Garrett, director of user experience at Web design consultant Adaptive Path, who coined the term Ajax: “Companies are really starting to recognize that the Web is more than a medium of static pages.”

The upshot: For the first time, the Web has become a place for real applications that match — and sometimes transcend — the performance of desktop software. “Until Google put this technology out there, no one was really thinking of Web pages as applications,” says Sapient Corp. (SAPE ) software architect Francis Shanahan. “In the next 12 months, people will be thinking about the Web in a new way.”

Ajax has rough edges. The programming tools behind it are still primitive, so writing software with it takes longer. And sometimes the resulting software flouts Web browser customs — for instance, disabling the “back” button. But already, Ajax is finding its way into mainstream business applications such as Sabre Holdings Corp.’s (TSG ) air scheduling software.

Future possibilities are intriguing, too. Even with Amazon’s patented “one-click” buying, you have to click on multiple pages to view a book, read reviews, get to the checkout page and shopping cart. Garrett suggests Ajax might allow all that to be done on one page. It doesn’t get any speedier than that.

There is much to like about this book. The explanations are straightforward, the code is readable, the examples are relevant, and the writing style is approachable.

— Michael J. Ross, Web developer/Slashdot contributor

Until recently, building interactive web-based mapping applications has been a cumbersome affair. This changed when Google released its powerful Maps API. Beginning Google Maps Applications with PHP and Ajax was written to help you take advantage of this technology in your own endeavorswhether you’re an enthusiast playing for fun or a professional building for profit. This book covers version 2 of the API, including Google’s new Geocoding service.

Authors Jeffrey Sambells, Cameron Turner, and Michael Purvis get rolling with examples that require hardly any code at all, but you’ll quickly become acquainted with many facets of the Maps API. They demonstrate powerful methods for simultaneously plotting large data sets, creating your own map overlays, and harvesting and geocoding sets of addresses. You’ll see how to set up alternative tile sets and where to access imagery to use for them. The authors even show you how to build your own geocoder from scratch, for those high-volume batch jobs.

As well as providing hands-on examples of real mapping projects, this book supplies a complete reference for the Maps API, along with the relevant aspects of JavaScript, CSS, PHP, and SQL. Visit the authors’ website for additional tips and advice.

About the Author
Michael Purvis is a mechatronics engineering student at the University of Waterloo, Ontario. He is a mostly self-taught programmer. Prior to discovering PHP, he was busy making a LEGO Mindstorms kit play Connect 4. Currently, he maintains an active community site for classmates, built mostly from home-brewed extensions to PunBB and MediaWiki.

He has written about CSS for the Position Is Everything web site, and occasionally participates in the css-discuss mailing list. He particularly enjoys those clever layouts that mix negative margins, relative positioning, and bizarre float tricks to create fiendish, cross-browser, flexible-width concoctions. These and other nontechnical topics are discussed on his weblog at uwmike.com.

Offline, he enjoys cooking, cycling, and social dancing. He has worked for We-Create, Inc. on a number of exciting PHP-based projects and has a strong interest in independent web standards.

Jeffery is a graphic designer and self-taught web applications developer best known for his unique ability to merge the visual world of graphics with the mental realm of code. With a Bachelor of Technology degree in Graphic Communications Management along with a minor in Multimedia, Jeffrey was originally trained for the traditional paper-and-ink printing industry, but he soon realized the world of pixels and code was where his ideas would prosper. In late 1999, he cofounded We-Create, Inc., an Internet software company based in Waterloo, Ontario, which began many long nights of challenging and creative innovation.

Currently, as Director of Research and Development for We-Create, Jeffrey is responsible for investigating new and emerging Internet technologies and integrating them using web standards-compliant methods. In late 2005, he also became a Zend Certified Engineer.

When not playing at the office, Jeffrey enjoys a variety of hobbies from photography to woodworking. When the opportunity arises, he also enjoys floating in a canoe on the lakes of Algonquin Provincial Park or going on an adventurous, map-free, drive with his wife. Jeffrey also maintains a personal website at JeffreySambells.com, where he shares thoughts, ideas, and opinions about web technologies, photography, design, and more. He lives in Ontario, Canada, eh, with his wife, Stephanie, his newborn daughter, Addison, and their little dog, Milo.

Cameron Turner has been programming computers since his first VIC 20 at age 7. He has been developing interactive web sites since 1994. In 1999, he cofounded We-Create, Inc., which specializes in Internet software development. He is now the company’s chief technology officer. Cam obtained his honors degree in computer science from the University of Waterloo with specialization in applied cryptography, database design, and computer security.

Cam lives in Canada’s technology capital of Waterloo, Ontario, with his wife, Tanya, son, Owen, and dog, Katie. His hobbies include biking, hiking, water skiing, and painting. He maintains a personal blog at CamTurner.com, discussing nontechnical topics, thoughts, theories, and family life.

Introduction
With the AJAX Feed API, you can download any public Atom or RSS feed using only JavaScript, so you can easily mash up feeds with your content and other APIs like the Google Maps API. See the program below for a simple example.

JavaScript and XMLHttpRequest use the Same-Origin Policy (SOP). With this policy, scripts can access data from the same host from which the containing page of HTML was served, but not other hosts. This protects users from certain classes of scripting attacks, but prevents many developers from writing AJAX-based mashups. The Google AJAX Feed API offers a simple workaround to these restrictions for a specific type of content available on the web: syndication feeds. See the security notes below for more details about how the AJAX Feed API preserves user security.

The “Hello, World” of the Google AJAX Feed API
The easiest way to start learning about this API is to see a simple example. The following example downloads the Digg RSS feed and displays the feed entry titles to the user:

You can download this example to edit and play around with it, but you’ll have to replace the key in that file with your own Google API key.

Including the AJAX Feed API on Your Page
To include the AJAX Feed API in your page, you need to both include the Google AJAX APIs script tag and call google.load(”feeds”, “1″):

The first script tag loads the google.load function, which lets you load individual Google APIs. google.load(”feeds”, “1″) loads Version 1 of the feeds API. Currently the AJAX Feed API is in Version 1, but new versions may be available in the future. See the versioning discussion below for more information.

Loading the API requires two steps because Google is moving to a new model of loading AJAX APIs to make it easier to include multiple Google APIs on your pages. Subscribe to the Google AJAX APIs Blog for announcements as we start rolling out this new AJAX API loading mechanism.

JSON and XML Result Formats
The AJAX Feed API can return feeds in two formats: JSON and XML. By default, the API returns the feed in the JSON format.

The AJAX Feed API JSON format is an abbreviated, canonicalized version of the original feed. It maps Atom and RSS attributes like title, description, and summary to a set of common JSON properties so that you can access Atom and RSS feeds uniformly. For example, the JSON result format returns the RSS attribute description as the JSON property content, just like Atom. Likewise, the RSS element pubDate is returned as the JSON property publishedDate to make the results uniform with Atom feeds. The JSON result format is useful if you only want to access standard RSS and Atom elements, and you don’t want to worry about the differences between feed formats. See the JSON example below or JSON result format specification for information.

If you specify the XML result format with setResultFormat, the AJAX Feed API will return the complete feed XML instead of JSON results. You can access the XML document with the standard XML DOM functions built into the browser. The XML result format is useful if you prefer using DOM functions to JSON or you need to access extension elements in the feed, like digg:diggCount. See the XML example below or XML result format specification for information.

You can also use both the JSON properties and the XML document to get the benefits of canonicalized attributes and access to XML extension elements. See the combined XML/JSON example below that uses the JSON attributes to access all of the entries in the feed, but uses the XML DOM to get the custom Digg digg:diggVotes element in the feed.

API Updates
The second argument to google.load is the version of the AJAX Feed API you are using. Currently the AJAX Feed API is in version 1, but new versions may be available in the future.

If we do a significant update to the API in the future, we will change the version number and post a notice on Google Code and the AJAX APIs discussion group. When that happens, we expect to support both versions for at least a month in order to allow you to migrate your code.

The AJAX Feed API team periodically updates the API with the most recent bug fixes and performance enhancements. These bug fixes should only improve performance and fix bugs, but we may inadvertently break some API clients. Please use the AJAX APIs discussion group to report such issues.

Examples
The Basics
This example downloads a single feed and displays the title of each entry to the user.

var feed = new google.feeds.Feed(”http://www.digg.com/rss/index.xml”);feed.load(function(result) { if (!result.error) { var container = document.getElementById(”feed”); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement(”div”); div.appendChild(document.createTextNode(entry.title)); container.appendChild(div); } }});View example (helloworld.html)

JSON Result Format
This example is similar to the simple example above, but it displays most of the canonical JSON properties exposed by the AJAX Feed API. See the JSON result format specification for information.

var feed = new google.feeds.Feed(”http://www.digg.com/rss/index.xml”);feed.load(function(result) { if (!result.error) { var container = document.getElementById(”feed”); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var attributes = ["title", "link", "publishedDate", "contentSnippet"]; for (var j = 0; j < attributes.length; j++) { var div = document.createElement(”div”); div.appendChild(document.createTextNode(entry[attributes[j]])); container.appendChild(div); } } }});View example (json.html)

XML Result Format
The following examples show how to access an RSS and Atom feed through the XML DOM rather than using the JSON results returned by the AJAX Feed API. The difference between accessing the two feeds is that the RSS example uses the RSS elements such as item and the Atom example uses Atom elements such as entry.

The first example directly accesses an RSS feed through the XML DOM. In the example, we take advantage of the getElementsByTagNameNS included in the AJAX Feed API to access the diggCount extension element in the Digg feed, which lets us display the number of votes next to the title in the output.

var feed = new google.feeds.Feed(”http://www.digg.com/rss/index.xml”);feed.setResultFormat(google.feeds.Feed.XML_FORMAT);feed.load(function(result) { var container = document.getElementById(”feed”); if (!result.error) { var items = result.xmlDocument.getElementsByTagName(”item”); for (var i = 0; i < items.length; i++) { var titleElement = items[i].getElementsByTagName(”title”)[0]; var title = titleElement.firstChild.nodeValue; var votesElement = google.feeds.getElementsByTagNameNS(items[i], “http://digg.com/docs/diggrss/”, “diggCount”)[0]; var votes = votesElement.firstChild.nodeValue; var div = document.createElement(”div”); div.appendChild(document.createTextNode(title + ” (” + votes + ” votes)”)); container.appendChild(div); } }});View example (xml.html)

The second example directly accesses an Atom feed through the XML DOM. In this example, we again take advantage of the getElementsByTagNameNS included in the AJAX Feed API to access the elements in the Google Base feed.

var feed = new google.feeds.Feed(”http://www.google.com/base/feeds/snippets”);feed.setResultFormat(google.feeds.Feed.XML_FORMAT);feed.load(function(result) { var container = document.getElementById(”feed”); if (!result.error) { var entries = google.feeds.getElementsByTagNameNS(result.xmlDocument, “http://www.w3.org/2005/Atom”, “entry”); for (var i = 0; i < entries.length; i++) { var titleElement = google.feeds.getElementsByTagNameNS(entries[i], “http://www.w3.org/2005/Atom”, “title”)[0]; var title = titleElement.firstChild.nodeValue; var priceElement = google.feeds.getElementsByTagNameNS(entries[i], “http://base.google.com/ns/1.0″, “price”)[0]; var price = priceElement.firstChild.nodeValue; var div = document.createElement(”div”); div.appendChild(document.createTextNode(title + ” (” + price + “)”)); container.appendChild(div); } }});View example (atomxml.html)