A Cool AJAX Feeds and Maps Mashup

Posted by Chris Schalk, Google API Team

Last month Google launched the AJAX Feed API which makes it super easy to pull down any RSS or ATOM feed into your JavaScript client page; all without requiring a server to do this! Also since there are more and more geo-encoded feeds becoming available, this means you can now pull down a geo-encoded feed and then display it geographically using the Google Maps API.

Here is a cool mashup demonstration that combines Google's AJAX Feed API, Flickr's geo-encoded picture feed mechanism and Google Maps. With this mashup one can enter one or several tags into the input field and then display the photos returned in the feed query geographically. For example if you enter the tag "Paris", it will return a set of photos that are associated with the tag "Paris". Other more general terms will also work such as "beach" or "clouds". Try experimenting with your own tag combinations to see what turns up!

Click here to check it out!

How does it work?

When the form is submitted, a call to the Flickr feed with the entered tag information is made using the AJAX Feed API. This is done by first creating a new "feed" variable using the Feed constructor which takes a feed URL as an argument:

var feed = new google.feeds.Feed(feedUrl + extraTag + "&georss=true");

The extraTag variable represents the tag (or tags) that the user entered on the form. The additional"georss=true" argument tells Flickr to provide only geo-encoded photos in the feed. Further methods are called on the "feed" variable to set the number of results and what mode the feed is called.

feed.setResultFormat(google.feeds.Feed.MIXED_FORMAT);
feed.setNumEntries(50);
feed.load(function(result) { ... });

Since the latitude longitude values in the feed are extracted using standard XML DOM methods, we set the feed result format to MIXED_FORMAT. Finally, the feed is called using feed.load(...). A callback function to process the results is sent as an argument to feed.load(). This function takes all the valid geocoded results and stores them in an array which is then used to populate a Google Map using GMarkers and GinfoWindow.

As you can see, the Maps and AJAX Feed API make a powerful combination. Here's another cool AJAX Feeds and Maps Mashup, but this time using a USGS earthquake feed.

For more information on the Google AJAX Feed API, click here.