Adding Google AJAX Search APIs to Your Web Application: Learn the Easy Basics to Adding Robust Content to Your Site
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
body {
background-color: lightblue;
color: black;
font-family: Arial, sans-serif;
}
#searchcontrol .gsc-control { width : 400px; }
<script src=<strong>https://www.google.com/jsapi</strong> 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);
//]]>
This is a very basic implementation of the Google Search API. See the Developer’s Guide for a more detailed explanation, including setting options.
This post is part of the series: Using Google Code
Do you want to bring your web pages to life? Add robust, interactive features to your web pages. This series of how-to articles walks you through adding Google APIs, simply, to your applications. Code samples in HTML & JavaScript included.