The JavaScript code responsible for extracting the feed information and putting it in an array of Google Map points is in Listing 4.

The important thing to notice in the code is the statement: feed.setresultFormat(googlefeeds.Feed.MIXED_FORMAT);. This statement allows for the extraction of both JSON and extra XML data at the same time. In our case this is important because the <geo:lat> and <geo:long> tags are extracted and assigned to the variables latnode and longnode. Its actual text content is then used to create a new Google Map point (using the constructor for GLatLng( )). Then it's pushed into an array of Google Maps points (mapPoints) that are displayed on a Google Map using the function showMap( ).

The code for showMap( ) isn't shown but is similar to many basic Google Maps API examples where an array of Map points are displayed with pop-up windows that contain HTML content. You can see examples on how to do this at www.google.com/apis/maps/documentation/examples/index.html.

To see a live demo go to http://gmaps-samples.googlecode.com/svn/trunk/ajaxfeed-flickr.html.

AJAX Feed Controls
The code examples so far involve a fair amount of JavaScript code to iterate through feed data and display it dynamically. However, if you simply need to display text or image data from a feed in a neatly formatted box on your Web page with minimal coding then using one of the AJAX feed controls with their efficient coding approach is definitely recommended.

Using the FeedControl
The first AJAX API Feed control worthy of attention is the AJAX Feed API control. The AJAX Feed API FeedControl provides a neat solution for Web page authors who want to present the text from one or multiple feeds in a stacked or tabbed HTML box without having to write a lot of JavaScript code as shown in Listing 5.

Figure 8 shows how the FeedControl renders. You'll notice that in the draw( ) method, there's a second argument with options for the FeedControl. In this case, it specifies render the control with tabbed bars. The default is to render multiple feeds in a stacked linear manner. The FeedControl also provides a setNumEntries( ) method that specifies how many feed results to display. And, finally, another feature of the FeedControl worth mentioning is its setLinkTarget( ) method, which defines the link target of the feed links rendered by the FeedControl. This lets you control whether clinking the links rendered in the FeedControl opens a new window, current window, top frame, or replace the current frame.

The FeedControl display is governed by a set of CSS styles that's well documented on the AJAX API Feed's homepage on the code.google.com Web site. A base look and feel stylesheet comes as a default with the FeedControl and to customize it, you merely override the default styles in your Web page.

Using the SlideShow Control
In contrast to offering an easy solution to display textual data from an Internet feed, the SlideShow (GFslideShow) control displays photos from Internet feeds in a slideshow format. The code to add this control to your page is also minimal.

...
    google.load("feeds", "1");

    function LoadSlideShow() {
      var feed = "http://feed.photobucket.com/images/sunsets/feed.rss";
      var options = {displayTime:2000, transitionTime:600, scaleImages:true};
      new GFslideShow(feed, "slideShow", options);
    }

    google.setOnLoadCallback(LoadSlideShow);

This code renders as shown in Figure 9. The SlideShow controls can pause a show by clicking a pause button that appears when you hover over the image. Some of the options that you can specify are the time that each image will show (displayTime), the time it takes to transition between images (transitionTime), the number of images to loop through (numResults), and whether or not to scale the images to the actual size of the control.

Using Feed Discovery
So far, all of the AJAX Feed examples have included known feed URLs. There are instances, however, when you may want to offer the user the ability to search for feeds on-the-fly. In this case you can use the AJAX Feed API's new Feed Discovery feature. Using it is a simple process of passing a query string as well as a callback function to a method, findFeeds( ) and it will return a set of results as an array of feed URLs with their respective titles. The results array can then be iterated through and have their feeds applied to a FeedControl. Listing 6 is a sample that queries feeds that are associated with the term "AJAX."

The results of the "AJAX" query returns the following feeds shown in Figure 10 that were displayed in a FeedControl in stacked display mode.

Summary
Having stepped through the various uses of the AJAX Feed API, you can see that it offers a wealth of functionality to a diverse audience. For those comfortable with JavaScript and DOM programming, the AJAX Feed API doesn't get in the way! Instead it empowers power developers in building completely custom solutions with Internet feed data.

On the other hand, for those who'd rather not get too deep into JavaScript programming, the easy-to-use advanced controls such as FeedControl and SlideShow offer complete and polished solutions with minimal coding.

For more information on Google AJAX APIs check out Google's API technology Web site at http://code.google.com or more specifically see http://code.google.com/apis/ajaxfeeds/. You'll see detailed documentation along with many helpful samples that will help you get started in minutes.