Google Ajax Search API

CSE 190 M (Web Programming), Spring 2007

University of Washington

References: homepage, code samples, API reference

Except where otherwise noted, the contents of this presentation are © Copyright 2007 Marty Stepp and are licensed under the Creative Commons Attribution 2.5 License.

Javascript frameworks

Many groups have released Javascript frameworks you can include in your web pages to add effects:

• Yahoo! UI : set of rich UI widgets (demos 1, 2, 3)
• Scriptaculous : rich UI animation/effects library
• Prototype : DOM/Ajax extender
• jQuery : DOM/event library
• Dojo : graphics (demos)
• Sarissa : XML-related tools
• Google Ajax Search API, Ajax Feeds API, Maps API, Web Toolkit

What is the Google Ajax Web API?

• a set of Javascript objects that allow you to perform Google searches
  • web, local, map, image, video, blog, news, books
• you can manipulate the search results or place them on your web page
• implemented as a .js file you include in your web page

API keys

• the API requires a "key" that is bound to your web domain (such as www.cs.washington.edu or students.washington.edu)
• you can sign up to get a key for a particular domain
• code to use API on https://students.washington.edu:

• (must remove line breaks from above code)

Ways of using the API

• onscreen search controls
  • simple
  • not much customization in appearance or behavior
• raw search results
  • more work
  • very customizable

"Hello, World!" app

// in your window.onload handler:
var searchControl = new GSearchControl();
searchControl.addSearcher(new search());
searchControl.draw(document.getElementById("id"));
searchControl.execute("query");

• id is the CSS ID of a div where you want the search to show up
• search is one of the following: GwebSearch, GlocalSearch, GvideoSearch, GblogSearch, GnewsSearch, GbookSearch
  • can add multiple searches to the same GSearchControl
• query is what you initially want to search for (optional)
• complete HTML file: for www.cs.washington.edu, for students.washington.edu

Search control example

The search objects

Methods/properties common to all searches

• new search()
• execute("query")
  tells the search control to search for the given text
• setSearchCompleteCallback(object, method)
  tells the search control to call the given method on the given object when the search is completed
• results[]
  an array of all search results found

Web search example

var search = new Search();
search.setSearchCompleteCallback(window, function() {
    for (var i = 0; i < search.results.length; i++) {
        do something with search.results[i];
    }
});
search.execute("query");

var search = new GwebSearch();
search.setSearchCompleteCallback(window, function() {
    for (var i = 0; i < search.results.length; i++) {
        alert(search.results[i].url);
    }
});
search.execute("miserable failure");

Web search: GwebSearch

• elements of results[] have the following properties:
  • url
  • content : a snippet of the page's text
  • titleNoFormatting : search result title

Local search: GlocalSearch

• elements of results[] have the following properties:
  • url
  • titleNoFormatting : search result title
  • lat, lng : latitude/longitude coordinates
  • streetAddress, city, region, country
  • phoneNumbers[]
  • ddUrl, ddUrlToHere, ddUrlFromHere : driving directions URLs

• GlocalSearch method: setCenterPoint("location")
  • search.setCenterPoint("Seattle, WA");
  • search.setCenterPoint("98105");

Video search: GvideoSearch

• elements of results[] have the following properties:
  • url
  • content : a snippet of the video's text
  • titleNoFormatting : search result title
  • duration : length of clip in seconds
  • tbUrl, tbWidth, tbHeight : thumbnail image info
  • playUrl : address of Flash video that can be embedded

Blog search: GblogSearch

• elements of results[] have the following properties:
  • postUrl, blogUrl : web address of this post and entire blog
  • content : a snippet of the blog post's text
  • titleNoFormatting : search result title
  • author, publishedDate

News search: GnewsSearch

• elements of results[] have the following properties:
  • url
  • content : a snippet of the blog post's text
  • titleNoFormatting : search result title
  • location (e.g. "Edinburgh,Scotland,UK")
  • publishedDate
  • relatedStories[]

Book search: GbookSearch

• elements of results[] have the following properties:
  • url
  • content : a snippet of the blog post's text
  • titleNoFormatting : search result title
  • authors
  • publishedYear
  • pageCount

Practice problem: Google Fight

• Write a page similar to Google Fight, where two Google search queries compete against each other, except that your page should determine the winner of the "fight" by the query that has the longest URL in any of its search results.