The Google Image Search API has been officially deprecated as of May 26, 2011. It will continue to work as per our deprecation policy, but the number of requests you may make per day may be limited. We encourage you to use the Custom Search API, which now supports image search.

Image Search Class Reference

The Google Image Search JavaScript API is a JavaScript library that allows you to embed Google Image Search in your web pages and other web applications. For Flash, and other non-JavaScript environments, the API exposes a raw interface that returns JSON-encoded results that are easily processed by most languages and runtimes. Read more in the JSON Developer's Guide.

This API is constantly evolving based on the active contributions of our users. Please join us in helping to shape the API and features by participating in the Google Search API discussion group.

Constructor - google.search.ImageSearch

google.search.ImageSearch produces search results by implementing the google.search.Search interface over the Google Image Search service. Upon completion of a search, it delivers a collection of google.search.ImageResult objects. The google.search.Search base class is not directly used except where noted.

Constructor Description

google.search.ImageSearch

The google.search.ImageSearch constructor allows you to execute searches and receive results from the Image Search service. The methods and properties described below apply to all objects that inherit from this base class. Each of those objects may supply additional interfaces as well.

google.search.ImageSearch is implemented in the following methods, static methods, and properties:

Methods

Method Description

.clearResults()

.clearResults() resets the searcher, clearing all of the results of the previous search. This method is implicitly called prior to executing a new search.

.clearResults() has no arguments and no return value.

.createResultHtml(result)

.createResultHtml(result) allows the caller to either create or re-generate the .html property of the specified result, where result supplies a result object.

If the result has no .html property, this call creates one. One circumstance requiring you to create an .html property is if the caller had previously used .setNoHtmlGeneration().

.createResultHtml() has no return value.

.execute(query)

.execute(query) initiates a new search, where query supplies the search term(s).

This method populates the object with the corresponding set of results, and calls the registered .setSearchCompleteCallback() handler.

.execute() has no return value.

.getResultSetSize()

.getResultSetSize() has no arguments and returns an integer from 1–8 indicating the current result set size (which is established by .setResultSetSize(). It allows you to determine the result set size returned by the search.

.gotoPage(page)

.gotoPage(page) requests a specific page of search results after an initial search completes, where page supplies the page number of the results that the application wants. Numbering of results pages begins at 0, and the searcher returns the first page by default.

If you specify a page number that is out of range, or if the underlying searcher has no .cursor property, no operation is performed.

.gotoPage() has no return value.

.setNoHtmlGeneration()

.setNoHtmlGeneration() stops your application from generating an .html property, leaving you with only the raw properties valid in a result. This property is useful for optimizing your application, if you want to handle rendering of the results yourself.

.setNoHtmlGeneration() has no arguments and no return value.

.setQueryAddition(term)

.setQueryAddition(term) sets (or clears) an optional, additional query term that is appended to all queries flowing through the searcher, where term supplies the additional term. Applications typically use this API to provide alternative results with mild variations from the original search term.

To clear an existing query addition, call either .setQueryAddition(null) or .setQueryAddition('').

.setQueryAddition() has no return value.

.setRestriction(type, opt_value)

.setRestriction(type, opt_value) specifies or clears a restriction on the set of results returned by this searcher. In order to establish a restriction, you need to specify both type and opt_value as described below. To clear a restriction, supply a valid value for type and either specify null for the value of opt_value, or do not supply the opt_value argument.

This API currently supports the following restriction types:

  • google.search.Search.RESTRICT_SAFESEARCH restricts results to images based on one of the following opt_value options:
    • google.search.Search.SAFESEARCH_STRICT filters for both explicit text and explicit images.
    • google.search.Search.SAFESEARCH_MODERATE filters for explicit images (the default behavior).
    • google.search.Search.SAFESEARCH_OFF turns off Safe Search filtering.

    The following code snippet demonstrates how to turn off safe search filtering:

    var searcher = new google.search.ImageSearch();
    searcher.setRestriction(
      google.search.Search.RESTRICT_SAFESEARCH,
      google.search.Search.SAFESEARCH_OFF
    );

  • google.search.ImageSearch.RESTRICT_IMAGESIZE restricts results to images with certain pixel dimensions based on one of the following opt_values:
    • google.search.ImageSearch.IMAGESIZE_SMALL returns small images, icons.
    • google.search.ImageSearch.IMAGESIZE_MEDIUM returns medium-sized images.
    • google.search.ImageSearch.IMAGESIZE_LARGE returns large images.
    • google.search.ImageSearch.IMAGESIZE_EXTRA_LARGE returns extra-large images.

    The following code snippet demonstrates how to retrieve only icon-sized images:

    var searcher = new google.search.ImageSearch();
    searcher.setRestriction(
      google.search.ImageSearch.RESTRICT_IMAGESIZE,
      google.search.ImageSearch.IMAGESIZE_SMALL);

  • google.search.ImageSearch.RESTRICT_COLORIZATION restricts results to images with certain colorization. Valid optional values for this type are as follows:
    • google.search.ImageSearch.COLORIZATION_GRAYSCALE returns only grayscale images
    • google.search.ImageSearch.COLORIZATION_COLOR returns only color images

    The following code snippet demonstrates how to retrieve only grayscale images:

    var searcher = new google.search.ImageSearch();
    searcher.setRestriction(
      google.search.ImageSearch.RESTRICT_COLORIZATION,
      google.search.ImageSearch.COLORIZATION_GRAYSCALE
    );

  • google.search.ImageSearch.RESTRICT_COLORFILTER returns images containing the specified color predominantly. Valid values for this type are as follows:
    • google.search.ImageSearch.COLOR_BLACK
    • google.search.ImageSearch.COLOR_BLUE
    • google.search.ImageSearch.COLOR_BROWN
    • google.search.ImageSearch.COLOR_GRAY
    • google.search.ImageSearch.COLOR_GREEN
    • google.search.ImageSearch.COLOR_ORANGE
    • google.search.ImageSearch.COLOR_PINK
    • google.search.ImageSearch.COLOR_PURPLE
    • google.search.ImageSearch.COLOR_RED
    • google.search.ImageSearch.COLOR_TEAL
    • google.search.ImageSearch.COLOR_WHITE
    • google.search.ImageSearch.COLOR_YELLOW

    The following code snippet demonstrates how to filter on the color red:

    var searcher = new google.search.ImageSearch();
    searcher.setRestriction(
      google.search.ImageSearch.RESTRICT_COLORFILTER,
      google.search.ImageSearch.COLOR_RED
    );

  • google.search.ImageSearch.RESTRICT_FILETYPE restricts images to a certain filetype (such as JPG) using one of the following opt value options:
    • google.search.ImageSearch.FILETYPE_JPG returns only jpeg images.
    • google.search.ImageSearch.FILETYPE_PNG returns only png images.
    • google.search.ImageSearch.FILETYPE_GIF returns only gif images.
    • google.search.ImageSearch.FILETYPE_BMP returns only bmp images.

    The following code snippet demonstrates how to retrieve only images of type PNG:

    var searcher = new google.search.ImageSearch();
    searcher.setRestriction(
      google.search.ImageSearch.RESTRICT_FILETYPE,
      google.search.ImageSearch.FILETYPE_PNG
    );

  • google.search.ImageSearch.RESTRICT_IMAGETYPE (experimental) restricts results to images of certain types. Valid optional values for this type are as follows:
    • google.search.ImageSearch.IMAGETYPE_FACES returns images with faces in them.
    • google.search.ImageSearch.IMAGETYPE_PHOTO returns photos.
    • google.search.ImageSearch.IMAGETYPE_CLIPART returns clipart images.
    • google.search.ImageSearch.IMAGETYPE_LINEART returns images of line drawings.

    The following code snippet demonstrates how to retrieve face images:

    var searcher = new google.search.ImageSearch();
    searcher.setRestriction(
      google.search.ImageSearch.RESTRICT_IMAGETYPE,
      google.search.ImageSearch.IMAGETYPE_FACES
    );

  • google.search.ImageSearch.RESTRICT_RIGHTS restricts results to images that are labeled with certain licenses. Valid optional values for this type are as follows:
    • google.search.ImageSearch.RIGHTS_REUSE restricts search results to images labeled for reuse
    • google.search.ImageSearch.RIGHTS_COMERCIAL_REUSE restricts search results to images labeled for commercial reuse
    • google.search.ImageSearch.RIGHTS_MODIFICATION restricts search results to images labeled for reuse with modification
    • google.search.ImageSearch.RIGHTS_COMMERCIAL_MODIFICATION restricts search results to images labeled for commercial reuse with modification

    The following code snippet demonstrates how to retrieve only images labeled for reuse with modification.

    var searcher = new google.search.ImageSearch();
    searcher.setRestriction(google.search.ImageSearch.RESTRICT_RIGHTS,
                            google.search.ImageSearch.RIGHTS_MODIFICATION);

    Note: Images returned with this filter may still have conditions on the license for use. Please remember that violating copyright is strictly prohibited by the API Terms of Use. For more details, see this article.

  • The following slightly-more-complete example demonstrates how to search for JPG face images of Carmen Electra, in grayscale:

    var searcher = new google.search.ImageSearch();
    searcher.setRestriction(
      google.search.ImageSearch.RESTRICT_IMAGETYPE,
      google.search.ImageSearch.IMAGETYPE_FACES
    );
    searcher.setRestriction(
      google.search.ImageSearch.RESTRICT_FILETYPE,
      google.search.ImageSearch.FILETYPE_JPG
    );
    searcher.setRestriction(
      google.search.ImageSearch.RESTRICT_COLORIZATION,
      google.search.ImageSearch.COLORIZATION_GRAYSCALE
    );
    searcher.execute('Carmen Electra');

.setRestriction() has no return value.

.setResultSetSize(num)

.setResultSetSize(num) specifies the size of the result set, where num supplies the number of results to display per page, from 1-8.

.setResultSetSize() has no return value.

.setSearchCompleteCallback(object, method, opt_arguments?)

.setSearchCompleteCallback(object, method, opt_arguments?) registers an object and method to notify when a search completes, where:

  • object supplies an application-level object that defines the context in which to call the specified method.
  • method supplies the search completion handler function, which checks for results and appends them to HTML nodes.
  • opt_arguments allows you to optionally pass in a list of arguments, in order, to the specified method. If you choose to use opt_arguments, you must pass in a list (null is also acceptable).

    For example, if you call this method as imageSearch.setSearchCompleteCallback(handler, handler.method, [[1, 2, 3]);, then you execute handler.method(1, 2, 3); when the search completes.

In this API, the calls are asynchronous. Therefore, you can't block on the return and then use the results. Rather, you have to use a callback, which will execute a method upon the return of the results.

.setSearchCompleteCallback() has no return value.

.setSiteRestriction(site)

.setSiteRestriction(site) restricts the set of image search results to images found on pages at the given URL. To restrict to www.photobucket.com, simply call this method passing in a value of "www.photobucket.com". To clear site restrictions, pass in a value of null.

.setSiteRestriction() has no return value.

The following snippet demonstrates how to restrict results to "photobucket.com".

var siteSearch = new google.search.ImageSearch();
siteSearch.setSiteRestriction("photobucket.com");

Static methods

Static method Description

.getBranding(opt_element?, opt_orientation?)

.getBranding(opt_element?, opt_orientation?) is a static helper function that returns a "powered by Google" HTML DOM branding node to your application, and optionally attaches it to your document as the only child of the specified optional element. The purpose of this method is to ensure that your application has a simple way to comply with branding requirements.

The branding node, by default, is designed for a horizontal orientation and works well underneath a search form, above or below a collection of results, etc.

  • opt_element is an optional argument which, if supplied, specifies the HTML DOM node that will be populated with a "powered by Google" branding element.
  • opt_orientation - an optional argument which, if supplied, specifies the orientation of the branding node. Valid values include:
    • google.search.Search.HORIZONTAL_BRANDING requests horizontal orientation. This is the default behavior.
    • google.search.Search.VERTICAL_BRANDING requests vertical orientation.

.getBranding() returns a "powered by Google" HTML DOM node that you can attach or clone onto your document.

You must call .getBranding() on google.search.Search, not on google.search.ImageSearch.

Warning! This API requires displaying attribution near any API input boxes and the display of results, indicating that it is "Powered by Google". If you choose not to use .getBranding(), you are obligated to provide this branding yourself.

.setOnLoadCallback(callback)

.setOnLoadCallback(callback) is a static function that registers the specified handler function to be called once the page containing this call loads, where callback is a required function called when the containing document is loaded and the API is ready for use (e.g., after onLoad). This function is implemented on the google namespace (i.e., google.setOnLoadCallback(callback);)

.setOnLoadCallback() has no return value.

Note: Previous documentation recommended that you use the body element's onload attribute (<body onload="OnLoad()">). While this is a fine way to go when you are in complete control of the page and all code loaded by the page, this approach can cause problems with some runtimes that destroy your body.onload handler. setOnLoadCallback() does not have these problems, and therefore is the recommended method of registering a callback that calls your code when the API is fully loaded and ready for use.

Handling search results

Result objects are produced using a JSON encoding of server search requests. Consequently, we have chosen not to implement formal JavaScript objects, and instead dynamically create these objects from their serialized form.

While there is no formal implementation of the objects, they exist, and we document them as if there was a backing JavaScript implementation. The impact of all this is minimal. All that it means is that there is no named constructor. For each result, it's as if the system called new Object() and then set formal properties on that object. These properties are documented below.

Important note: Maximum number of search results

The Google Image Search API allows a maximum of 64 results on 8 pages. There is no way to get more than 64 results.

Result properties

Here are the basic properties allowing you to handle results from the Image Search API.

Property Description

content

Supplies a brief snippet of information from the page associated with the image result.

contentNoFormatting

Supplies the same information as .content, only stripped of HTML formatting.

GsearchResultClass

Indicates the type of result (for example, google.search.ImageSearch.RESULT_CLASS indicates GimageResult).

height

Supplies the height of the image in pixels.

html

Supplies the root of an HTML element that may be cloned and attached somewhere into the application's DOM hierarchy. We expect that this is the primary property that applications will use, typically by cloning this node and attaching it to the DOM hierarchy.

We expect applications to control styling, as well as which elements are displayed, using CSS. For instance, we expect the following fragment to be common across all applications that wish to copy and paste search results delivered through the Image Search API.

// clone the .html node from the result
var node = result.html.cloneNode(true);

// attach the node into my dom
container.appendChild(node);

originalContextUrl

Supplies the URL of the page containing the image.

tbHeight

Supplies the height, in pixels, of the image thumbnail.

tbUrl

Supplies the URL of a thumbnail image.

tbWidth

Supplies the width, in pixels, of the image thumbnail.

title

Supplies the title of the image, which is usually the base filename (for example, monkey.png.

titleNoFormatting

Supplies the page title associated with the search result, but unlike .title, this property is stripped of HTML markup (e.g., <b>, <i>, etc.).

unescapedUrl

Supplies the raw URL (containing non-alphanumeric characters) to an image in the result set. For example:

http://farm2.static.flickr.com/1104/1434841504_edc671e65c.jpg?v\u003d0

url

Provides the encoded URL to an image file in the result set. For example:

http://farm2.static.flickr.com/1104/1434841504_edc671e65c.jpg%3Fv%3D0

visibleUrl

Supplies a shortened version of the URL associated with the result, typically displayed in green and stripped of a protocol and path.

width

Supplies the width of the image in pixels.

Troubleshooting

If you encounter problems with your code:

  • Look for typos. Remember that JavaScript is a case-sensitive language.
  • Use a JavaScript debugger. Google Chrome has a full set of developer tools. In Firefox, you can use the JavaScript console or the Firebug. In IE, you can use the Microsoft Script Debugger.
  • Search the discussion group. If you can't find a post that answers your question, post your question to the group along with a link to a web page that demonstrates the problem.