Skip to content

Google AJAX Search API

April 22, 2009

Google AJAX Search API lets you to create Google search in your own websites with javascript. You can embed a simple, dynamic search and display the search result in your own web pages.
There are three types of searches they are,

  • Web Search.
  • Local Search.
  • Multimedia Search.

Web Search

You can embed web search, blog search and news search into your own website or blogs.

Code

<html> 
  <head> 
    <title>Google AJAX Search API Sample</title> 
    <style type="text/css"> 
    body {
      background-color: white;
      color: black;
      font-family: Arial, sans-serif;
      font-size : 13px;
      margin: 15px;
     }
   #searchcontrol .gsc-control { width : 400px; }
   </style> 
 </head> 
 <body> 
    <div id="searchcontrol">Loading</div> 
 </body> 
</html>
<script src="http://www.google.com/jsapi" type="text/javascript">
</script> 

<script type="text/javascript"> 
google.load('search', '1.0'); 
function OnLoad()
{ 
      // Create a search control 
      var searchControl = new google.search.SearchControl(); 

      // Add in a full set of searchers 
      var localSearch = new google.search.LocalSearch(); 
      searchControl.addSearcher(localSearch); 
      searchControl.addSearcher(new google.search.WebSearch()); 
      searchControl.addSearcher(new google.search.BlogSearch()); 
      searchControl.addSearcher(new google.search.NewsSearch()); 
      searchControl.addSearcher(new google.search.BookSearch()); 
      searchControl.addSearcher(new google.search.PatentSearch()); 
 
      // Set the Local Search center point 
      localSearch.setCenterPoint("India, IND"); 

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

      // execute an inital search 
      searchControl.execute("India"); 
} 
google.setOnLoadCallback(OnLoad, true); 
</script>

(Copy & paste in .html file)

Output Screenshot

Web Search

Web Search

 Local Search

If you already have a google Map application and wants to add search capabilities the local search makes you more ease.

Code

<html>
 <head>
  <title>Local Search</title>
 </head>
 <body>
  <div id="content">Loading....</div>
 </body>
</html>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("maps", "2");
google.load("elements", "1", {packages : ["localsearch"]});
function OnLoad()
{
    var content = document.getElementById("content");
    /*setting height and width for the div tag where the map
displays*/
    content.style.border = "1px solid #979797";
    content.style.height = "350px";
    content.style.width = "500px";

    var map = new google.maps.Map2(content);
    map.setCenter(new google.maps.LatLng(9.999958, 78.155365), 11);
    var lsc = new google.elements.LocalSearch();
    map.addControl(lsc);
}
google.setOnLoadCallback(OnLoad);
</script>

(Copy & paste in .html file)

Output Screenshot

Local Search

Local Search

Multimedia Search

Multimedia search is as similar as Web search, there we have created a object for the class i.e.

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

then we added the searches such as,

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

similarly for image and video search, just add the below searchers,

searchControl.addSearcher(new google.search.VideoSearch()); 
searchControl.addSearcher(new google.search.ImageSearch());

More Examples

Advertisements

From → Google API

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: