Using Google Code: Part 1 - Search

Written by: Finn Orfano • Edited by: Misty Faucheux
Updated Oct 11, 2010 • Related Guides: Google | Google Search

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.

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." (http://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 <title> tag within the your <HEAD> section using the following code. Please note that JavaScript is case sensitive.

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

"type="text/Javascript"></script>

<script language="Javascript" type="text/javascript">

//<![CDATA[

google.load("search","1.0");

...

</script>

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 http://code.google.com/apis/ajaxsearch/documentation/ 10/20/2009) shows how to implement a local search with WebSearch and NewsSearch.

The Code

<!--

You are free to copy and use this sample.

License can be found here:

http://code.google.com/apis/ajaxsearch/faq/#license

-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>Bruce Chapin's adaptation of Google HelloWorld sample script</title>

<style type="text/css">

body {

background-color: lightblue;

color: black;

font-family: Arial, sans-serif;

}

#searchcontrol .gsc-control { width : 400px; }

</style>

<script src=http://www.google.com/jsapi type="text/javascript"></script>

<script type="text/javascript">

//<![CDATA[

google.load('search', '1.0');

function OnLoad() {

// Create a search control

var searchControl = new google.search.SearchControl();

// Add in a full set of searches

var localSearch = new google.search.LocalSearch();

searchControl.addSearcher(localSearch);

searchControl.addSearcher(new google,search.WebSearch());

searchControl.addSearcher(new google.search.NewsSearch());

// Set the Local Search center point

localSearch.setCenterPoint("Omaha, NE");

// tell the searcher to draw itself and tell it where to attach

searchControl.draw(document.getElementById("searchcontrol"));

// execute an initial search

searchControl.execute("BrightHub");

}

google.setOnLoadCallback(OnLoad, true);

//]]>

</script>

</head>

<body>

<div id="searchcontrol">Loading</div>

</body>

</html>

This is a very basic implementation of the Google Search API. See the Developer's Guide for a more detailed explanation, including setting options.