Google custom search for images only

Question

Since Google image search API is deprecated, one should use Google custom search API for this.

I've made a small example using it. My problem is I want to return google image search results only. Whereby this shows web results, and the user may switch to the image result. How can I show only the image results by default?

<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1', {language : 'hu'});
  google.setOnLoadCallback(function() {
    var customSearchOptions = {
        enableImageSearch: true,
        imageSearchOptions: {
              layout: google.search.ImageSearch.LAYOUT_CLASSIC
        }
    };

    var options = new google.search.DrawOptions();
    options.setAutoComplete(true);

    var customSearchControl = new google.search.CustomSearchControl('XXX', customSearchOptions);

    customSearchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);
    customSearchControl.setAutoCompletionId('XXX');

    customSearchControl.draw('cse', options);
  }, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />

The API documentation is quite poor, it only describes how to add additional results.

Answer 1

Google images search is now supported in the Custom Search Engine API. See the API parameters section of this page. I'm using the API with python and for my application I just specify the parameter in the API call.

searchType = "image"

See this post on the cse blog.

EDIT: As Marc points out in his comment below, you need to click "Enable image search" in your CSE console.

Answer 2

Per the Google Custom Search Element Control API - documentation web site, this is possible.

https://developers.google.com/custom-search/docs/element

This is the fragment used for searching by image by default:

'defaultToImageSearch'

So I believe the full syntax for using this would be:

<script>
.
// Google custom search code, ids go here...
.
</script>
<gcse:search></gcse:search>
**<gcse:searchresults enableImageSearch="true" defaultToImageSearch="true">**

Answer 3

For those going through the WebExtensions tutorial, here's the updated code I used in popup.js to make it work with the new CSE functionality:

/**
 * @param {string} searchTerm - Search term for Google Image search.
 * @param {function(string,number,number)} callback - Called when an image has
 *   been found. The callback gets the URL, width and height of the image.
 * @param {function(string)} errorCallback - Called when the image is not found.
 *   The callback gets a string that describes the failure reason.
 */
function getImageUrl(searchTerm, callback, errorCallback) {
  // Google image search - 100 searches per day.
  // https://developers.google.com/image-search/
  // var searchUrl = 'https://ajax.googleapis.com/ajax/services/search/images' +
  //   '?v=1.0&q=' + encodeURIComponent(searchTerm);
  var searchUrl = 'https://www.googleapis.com/customsearch/v1' +
    '?key=' + key + '&cx=' + cx + '&searchType=image&q=' + encodeURIComponent(searchTerm);

  var x = new XMLHttpRequest();
  x.open('GET', searchUrl);
  // The Google image search API responds with JSON, so let Chrome parse it.
  x.responseType = 'json';
  x.onload = function() {
    // Parse and process the response from Google Image Search.
    var response = x.response;
    if (!response || !response.items || response.items.length === 0) {
      errorCallback('No response from Google Image search!');
      return;
    }
    var firstResult = response.items[0];
    // Take the thumbnail instead of the full image to get an approximately
    // consistent image size.
    var imageUrl = firstResult.image.thumbnailLink;
    var width = parseInt(firstResult.image.thumbnailWidth);
    var height = parseInt(firstResult.image.thumbnailHeight);
    console.assert(
        typeof imageUrl == 'string' && !isNaN(width) && !isNaN(height),
        'Unexpected respose from the Google Image Search API!');
    callback(imageUrl, width, height);
  };
  x.onerror = function() {
    errorCallback('Network error.');
  };
  x.send();
}

Mainly it's changing the search URL (which should have searchType=image as mentioned) and the response structural references in getImageUrl, and setting up the CSE engine. Make sure your CSE has Image search turned on, and under Sites to search make sure to select Search the entire web but emphasize included sites from the options list.

Answer 4

I'm not 100% certain on this, but I don't think the API supports what you're trying to do. This is not at all surprising, as Google's search API's are infamous for being lacking in even basic functionality (such as the standard search API's limit of 20 results, etc). I think the fact that I'm the first person to answer this in the 3 days it's been active is another indication that this is probably just not supported (or, if it is, Google never bothered to tell anyone).

I know you're not going to like this, but I think your best option is to scrape the images out of the returned result set yourself. That's typically what people have to resort to when dealing with Google results data. Fortunately, their frontend code is remarkably consistent, so a few well-tuned regex matches and/or splits should do the trick for ya.

And yes, it's total BS that Google has provided such lousy support for this API. =)

Answer 5

Try adding this line:

customSearchOptions['disableWebSearch'] = true;

Answer 6

Try this one

customSearchOptions['searchType'] = "image"
customSearchOptions['enableImageSearch'] = true
customSearchOptions['disableWebSearch'] = true;

Answer 7

I tried to get a more authoritative answer in the official Google AJAX APIs group, and it seems the answer is NO(!). Google custom search API currently does not support image search only. You can use the deprecated Google image search API instead.

check this