Home / Articles / Creating a Google Image Widget Using the Google Search API

Creating a Google Image Widget Using the Google Search API

Article Description

The widgets provided by Google are a great way to get the functionality you’re looking for without writing any code, but sometimes there’s a need for a little more control and flexibility with layout, design, etc. Kris Hadlock explains the steps that are necessary to use the RESTful interface provided through the Google Ajax Search API in order to create a custom JavaScript Google Image widget.
Rendering the Results

Rendering the Results

To render a web page from the results, we need to start with an HTML file and include the GoogleAPI.js file. Because the GoogleAPI object is self-contained, there are no other files that need to be included, but we do need to create the div element with the gimages id so that the object knows where to write the HTML (Listing 3).

Listing 3—The HTML file is used as the web page where the GoogleAPI object renders the widget (index.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Creating a Google Image Widget using the Google Search API</title> <script type="text/javascript" src="assets/js/GoogleAPI.js"></script> <link type="text/css" rel="stylesheet" href="assets/css/googleapi.css" /> </head> <body> <div id="gimages">Loading images...</div> </body> </html>

You’ll also notice that I’ve included a CSS file called googleapi.css. The nice thing about creating a custom widget is that you can create your own HTML layout and use your own CSS for the design.