How to load google images within my site using api?

Question

I am trying to implement what on this page but I am having this error on console:

www.google.com/jsapi?key=ABQIAAAAr19Eul_kZsYCBnyMjSJbPhSS8zuUzs-phHbAd9SKTtjFtv728xQ8NcR0mWFbQ0Ita4R2Wzc7rTuWUQ:22 A Parser-blocking, cross-origin script, https://www.google.com/uds/?file=search&v=1&output=nocss%3Dtrue, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity.

I tried to follow this SO answers on Google image search says api no longer available.

I am basically trying to display images based on a given string using jquery or javascript and ajax.

NOTE: I already set up my own key and cx

score 0 · Answer 1 · answered Nov 13 '16 at 14:29

Yes, this API is no longer available and you won't be able to use it anymore. However, we still have some options:

As you may have stated, Google Custom Search is the best option. Indeed, you cannot use it with the JS code you have. Once you already have the App Key and cx code in hands, the only thing you have to do is call the request with the proper params as well as handling the response. Let's see:
```
https://www.googleapis.com/customsearch/v1?q=java&cx=YOUR_CX_CODE&key=YOUR_APP_KEY&num=1&start=99
```
This is going to return the JSON-based response with all the image URLs wrapped onto cse_image property. Go ahead, call it by Ajax requests and map the responses to your HTML.

Also, it is possible to build the URL dinamically through forms by APIs Explorer.

CX Generator, by itself, already gives us a generated JS code with pre-formatted HTML and style for web searching:

(function() {
  var cx = 'YOUR_CX_CODE';
  var gcse = document.createElement('script');
  gcse.type = 'text/javascript';
  gcse.async = true;
  gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(gcse, s);
})();

<gcse:search></gcse:search>

Note: Remember that you can add basemaps based on domains, e.g *.com, *.net, etc. instead of searching only for specific websites.

You can explore additional options other than Google ones (once it has a limitation of 100 queries per day for free. After that $5 per 1,000 queries.):
- Riffsy API: http://api.riffsy.com/#start
- Gallery Search Imgur API: http://api.imgur.com/endpoints/gallery#gallery-search
- Ababeen API: http://api.ababeen.com/
Or, if you still wanna go with Google API, you can try hubot scripts, which interacts with the Google Custom Search API for more productivity, once it sets up a lot of things for us: https://github.com/hubot-scripts/hubot-google-images/

Thanks a lot, check my own answer on how I resolved it – rob.m Nov 13 '16 at 14:35 — rob.m, Nov 13 '16 at 14:35

score 0 · Answer 2 · answered Nov 13 '16 at 14:35

This is how I resolved it

   $.getJSON( "https://www.googleapis.com/customsearch/v1?key=MY_API_KEY&cx=MY_CX_KEY&q=flowers&searchType=image&fileType=jpg&imgSize=xlarge&alt=json",
        function (data) {
            $.each(data.items, function(i,item){    
               $("body").append("<img src=" + item.link + ">");
            });
    });

How to load google images within my site using api?

2 Answers2