Adding Google AJAX Search APIs to Your Web Application: Learn the Easy Basics to Adding Robust Content to Your Site

Quick Take

You can easily add Internet and local search to your web applications by using the Google Search API. This article presents code samples and how-to instructions for adding Google Search to your web site. This is the first in a series of Google AJAX API How-To articles.

On this page

The most commonly used Google API seems to be Search, making it the perfect candidate for first in a series on including Google Code in web applications. I introduced this topic in “Should I Try the Google APIs?” found on the Brighthub Google Channel.

You can get to the Google AJAX APIs here . Once there you will see the more popular APIs. We are going to address the Google AJAX Search API (referred to as Search API here) first. Quoting Google, “The Google AJAX Search API lets you put Google Search in your web pages with JavaScript.” (https://code.google.com/apis/ajaxsearch/ 10/15/2009). The Google APIs provide “Web Search”, “Local Search” and “Multimedia Search.” The Search API even allows integration with Google Maps. The Web Search API can locally and globally search the Web, News Services and Blogs.

The easiest way to incorporate search is to use the wizards and API key feature at the Google Code Key Sign-up Page . Please read the sign-up pages found in the link.

Wizards at Work

The Wizards are point & click, copy & paste and practically self explanatory. There are wizards for NewsShow_, Map Search, Video Bar, Video Search, Blog Bar, Book Bar,_ and two versions of a News Bar. Let’s look at including the APIs using HTML and scripting. (Go to Google’s AJAX Search Documentation for more information.) There is an interface available for non-JavaScript instances. That raw interface returns JSON results that can be manipulated in most environments.

The Search API is a JavaScript library that is used to place Google Search in your web applications. One of the keys to implementing any of the Google APIs is to include Google’s API loader. This URL needs to be included right after your tag within the your section using the following code. Please note that JavaScript is case sensitive.

<script src=https://www.google.com/jsapi

**"**type=“text/Javascript”>

The parameters in the google.load function indicate the API and version that you are calling. In this case, we are calling the search API version 1. Using the Google Loader allows you to place more than one API on a page or in an application.

One thing to remember is that the G prefix is removed from the API name and replaced with the appropriate namespace (e.g. GLocalSearch becomes Google.search.LocalSearch). Once you have loaded the search API, you can call the search option you want with the SearchControl object. This object has seven child objects available: WebSearch, VideoSearch, BlogSearch, NewsSearch, ImageSearch, BookSearch and PatentSearch. Each of these can be called from the LocalSearch child as well. The addSearcher method will add the specific object. The following snippet (adapted from https://code.google.com/apis/ajaxsearch/documentation/ 10/20/2009) shows how to implement a local search with WebSearch and NewsSearch.