Retrieve pictures from Google Search engine using jQuery

Problem

I started working on an application for storing information about books I own and I figured out it would be great to have a page where all books would be represented by their covers. I reckon that in general having covers would greatly improve the look & feel of the website. My first idea was to simply allow users to load covers’ images from disk. As much as it did satisfy the general problem, the solution was far from neat. I could not help but see this as a big burden to the end users. So I figured out, let’s do it for them. Let’s find covers from the internet and let them choose which one they would like to use.

READ ME FIRST!

Sorry, but this particular part of the API has been recently disabled by Google. I will shortly post a revised version of this article to demonstrate an alternative solution.

11th of December 2015

Solution

Whenever I need to find a picture of basically anything I always use Google Images so my guess was that it should be able to help me this time as well. Of course imitating a browser search that a standard user would perform and then parsing the resulting html page was out of the question. Nevertheless, it’s Google, so I was sure there has to be some API for their most famous and most used product. Fortunately, there is one!

Final result

See the result below.

Final effect

See the source code of demo implementation here.

Google Search API

Google provides an API to retrieve results of its searching engine in JSON/Atom format. In order to use it we need to send a request to https://ajax.googleapis.com/ajax/ services/search/images with proper parameters:

rsz
number of results we want to receive in response (up to 8),
start
lets you skip n-1 results that would be normally returned (allows you to load further pictures),
q
search query.
callback
name of a method that will process response set (if this parameter is present, the format of response will be JSON-P not JSON).

JSON-P implementation

I use jQuery method ajax and JSON-P format to execute cross-domain call. In general to use JSON-P in jQuery we need to specify proper dataType and code that will be responsible for processing query result.

For this particular problem code would look like this:

Because there is dataType: “jsonp” parameter for ajax call I do not have to put a callback parameter to the request string send to Google Search. This will be handled by jQuery (see below request generated by framework). Callback parameter has been attached by jQuery with some random name of a method that should be called upon receiving a response. This method will execute the function provided in the success parameter of ajax call (in my case refreshImages(response)).

Handling results

As we are dealing with JSON-P call a response format will be slightly different from pure JSON. It looks a bit as if we were trying to call a method within the code itself. As you can see the name of the method is the same as the name specified in the callback parameter when sending the request.

Fortunately we do not have care about that, what we receive to process is only the responseData object. Below you can see a single result returned in response from Google Search:

In my case I wanted to use urls of images to display them on my website and let user decide which one he/she thinks is the best. The code responsible for updating images can be found below.

Improvements

Loading more results

Even though there is a limit of 8 pictures we can get from the server in a single query, if we modify the start parameter we can ultimately retrieve more than 8 results (mind you using this method we can only retrieve up to 100 first results, after that a retrieved result set will be empty).

Change as you type

I have an input field where user provides a name of book, I want to refresh the covers as he/she types. To achieve that I use below jQuery code:

Links

6 thoughts on “Retrieve pictures from Google Search engine using jQuery”

Please join discussion