TechAnurag

Google’s AJAX APIs let you implement rich, dynamic web sites entirely in JavaScript and HTML. Have a look at http://www.techanurag.com/ajaxsearch/ before you continue just to appreciate hat you can do with Ajax APIs. You can add a map to your site, a dynamic search box, or download feeds with just a few lines of JavaScript. These JavaScript-based APIs that allow a wide range of web developers, from experts to casual bloggers, to integrate rich and compelling Google provided search and feed data seamlessly into their web pages. Integrating cool search and Internet feed technologies ranging from traditional web searches to compelling multimedia searches is actually very easy to do without even requiring a strong AJAX programming background.

This article will first discuss the various available API’s and then a sample code.

Google Maps API – The Google Maps API lets you embed Google Maps in your own web pages with JavaScript. The API provides a number of utilities for manipulating maps and adding content to the map through a variety of services, allowing you to create robust maps applications on your website.

Google AJAX Search API – The Google AJAX Search API lets you put Google Search in your web pages with JavaScript. You can embed a simple, dynamic search box and display search results in your own web pages or use the results in innovative, programmatic ways.

Google AJAX Feed API – 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.The Google AJAX Feed API takes the pain out of developing mashups in JavaScript because you can now mash up feeds using only a few lines of JavaScript, rather than dealing with complex server-side proxies.

Google Visualization API – The Google Visualization API lets you access multiple sources of structured data that you can display, choosing from a large selection of visualizations. Google Visualization API enables you to expose your own data, stored on any data-store that is connected to the web, as a Visualization compliant datasource. Thus you can create reports and dashboards as well as analyze and display your data through the wealth of available visualization applications.

Google AJAX Language API – With the AJAX Language API, you can translate and detect the language of blocks of text within a webpage using only Javascript. In addition, you can enable transliteration on any textfield or textarea in your web page. The language API is designed to be simple and easy to use to translate and detect languages on the fly when offline translations are not available.

Google Book Search APIs – With Google Book Search APIs you can easily Embed book previews on your site, Integrate search results and social features into your application, Link reliably to Book Search.

Google Earth API – The Google Earth Plug-in and its JavaScript API let you embed Google Earth, a true 3D digital globe, into your web pages. Using the API you can draw markers and lines, drape images over the terrain, add 3D models, or load KML files, allowing you to build sophisticated 3D map applications.

Google Friend Connect APIs – Google Friend Connect lets you instantly awaken and strengthen the community that visits your web site.

Friend Connect:

1. Makes it easy for every site owner to add Friend Connect to their site regardless of their technical capabilities.
2. Uses open standards to let visitors control their own data and freely share it with sites and services as they see fit. Services include OpenID providers like Yahoo, social network providers like Twitter, and update aggregators like Plaxo Pulse.

The AJAX Libraries API – The AJAX Libraries API is a content distribution network and loading architecture for the most popular, open source JavaScript libraries. By using the Google AJAX API Loader’s google.load() method, your application has high speed, globaly available access to a growing list of the most popular, open source JavaScript libraries.

Getting Started with the Google AJAX APIs

Here is a simple “HelloWorld” AJAX Search application that integrates Google’s powerful search mechanism into a custom web page.

A HelloWorld AJAX Search Example

It is a two-step process. The first step, as with any of Google’s AJAX APIs, involves generating an API key for your usage of the API. This can be done by going to Google’s developer web site, http://code.google.com, and generating an API key. A Google API key allows you to use the AJAX APIs on a particular web site or domain.

Here is a sample code from http://code.google.com.


<html>
<head>
<script src="www.google.com/uds/api?file=uds.js&v=1.0
&key=YOUR-KEY" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function onLoad() {
// Create a search control
var searchControl = new GSearchControl();

// Add in a full set of searchers
var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());
searchControl.addSearcher(new GnewsSearch());
searchControl.addSearcher(new GbookSearch());

// Set the Local Search center point
localSearch.setCenterPoint("New York, NY");

// tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("searchcontrol"));

// execute an inital search
searchControl.execute("VW Beetle");
}
GSearch.setOnLoadCallback(onLoad);

//]]>
</script>
</head>
<body>
<div id="searchcontrol">Loading</div>
</body>
</html>

The uds.js file provides some of the behind-the-scenes plumbing for enabling the search mechanism into your page. Notice the first line of code:


var searchControl = new GSearchControl();


It first creates a new base GSearchControl class. The next bit of code adds specific searcher options to the base control. As you can see, searchers for Local, Web, Video, Blog, News, and Book are added to the search control by using:


var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());
searchControl.addSearcher(new GnewsSearch());
searchControl.addSearcher(new GbookSearch());


And finally, to execute an initial search as the page is loaded, the line:


GSearch.setOnLoadCallback(onLoad);


is used to execute the "onLoad( )" function that both initializes the search controls and executes an initial search using:

searchControl.execute("VW Beetle");

This results in the page rendering with an initial set of search results.

See a working example of Google Ajax Search here. It uses more advanced code.

Whether your are a diehard AJAX programmer perfectly comfortable manipulating DOM elements, or simply just want to add some neat content to your Blog, the Google AJAX APIs have a solution for you. For more information on the Google AJAX APIs, check out Google's API technology web site at: http://code.google.com. Here You'll also see plenty of documentation, samples, and of course the code generation wizards.

Once again have a look at our Google Ajax Search. We recommend you to bookmark the page and always use it for searching. It's quick, its fun!