CODEWITHSUNDEEP
javascriptrestapigoogle-custom-searchgoogle-image-search
Jon
Jon

Reputation: 8511

GET Call for Getting List of Google Image Picture URLs

How would I get a JSON response of images that Google Images returns?

I have tried poking around in the documentation and found out that the Google Images API has been deprecated in favor for Google Custom Search API. From my understanding, Google Custom Search allows you to search within a domain instead of the entire web. I have tried making the following call but I was returned a JSON response without any image URLS

GET https://www.googleapis.com/customsearch/v1?key={API_KEY}&cx={ENGINE_API}&q=vancouver&searchType=image

{
 "kind": "customsearch#search",
 "url": {
  "type": "application/json",
  "template": "https://www.googleapis.com/customsearch/v1?q={searchTerms}&num={count?}&start={startIndex?}&lr={language?}&safe={safe?}&cx={cx?}&sort={sort?}&filter={filter?}&gl={gl?}&cr={cr?}&googlehost={googleHost?}&c2coff={disableCnTwTranslation?}&hq={hq?}&hl={hl?}&siteSearch={siteSearch?}&siteSearchFilter={siteSearchFilter?}&exactTerms={exactTerms?}&excludeTerms={excludeTerms?}&linkSite={linkSite?}&orTerms={orTerms?}&relatedSite={relatedSite?}&dateRestrict={dateRestrict?}&lowRange={lowRange?}&highRange={highRange?}&searchType={searchType}&fileType={fileType?}&rights={rights?}&imgSize={imgSize?}&imgType={imgType?}&imgColorType={imgColorType?}&imgDominantColor={imgDominantColor?}&alt=json"
 },
 "queries": {
  "request": [
   {
    "title": "Google Custom Search - vancouver",
    "totalResults": "14400000",
    "searchTerms": "vancouver",
    "count": 10,
    "startIndex": 1,
    "inputEncoding": "utf8",
    "outputEncoding": "utf8",
    "safe": "off",
    "cx": "004087055820537748846:jsb6pxcwlfc",
    "searchType": "image"
   }
  ],
  "nextPage": [
   {
    "title": "Google Custom Search - vancouver",
    "totalResults": "14400000",
    "searchTerms": "vancouver",
    "count": 10,
    "startIndex": 11,
    "inputEncoding": "utf8",
    "outputEncoding": "utf8",
    "safe": "off",
    "cx": "004087055820537748846:jsb6pxcwlfc",
    "searchType": "image"
   }
  ]
 },
 "context": {
  "title": "Google"
 },
 "searchInformation": {
  "searchTime": 0.387643,
  "formattedSearchTime": "0.39",
  "totalResults": "14400000",
  "formattedTotalResults": "14,400,000"
 },
 "items": [
  {
   "kind": "customsearch#result",
   "title": "Gastown in Vancouver",
   "htmlTitle": "Gastown in \u003cb\u003eVancouver\u003c/b\u003e",
   "link": "https://www.google.com/maps/d/thumbnail?mid=1cjm_9rHpykRpj_ynUSKktJuaVPo&hl=en",
   "displayLink": "www.google.com",
   "snippet": "Gastown in Vancouver",
   "htmlSnippet": "Gastown in \u003cb\u003eVancouver\u003c/b\u003e",
   "mime": "image/",
   "image": {
    "contextLink": "https://www.google.com/mymaps/viewer?mid=1cjm_9rHpykRpj_ynUSKktJuaVPo&hl=en",
    "height": 520,
    "width": 504,
    "byteSize": 65000,
    "thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTM1MMx7p1iq8mIIAGQ9vhOq3jCO5DfD2Hg0JxDIP-xv_te-5y3bJ6aU3Ef",
    "thumbnailHeight": 131,
    "thumbnailWidth": 127
   }
  },
  {
   "kind": "customsearch#result",
   "title": "Ramada Limited Vancouver Downtown",
   "htmlTitle": "Ramada Limited \u003cb\u003eVancouver\u003c/b\u003e Downtown",
   "link": "https://www.google.com/maps/d/thumbnail?mid=1B41Gt1WF8xLcJyfvc38rj8LBKgA&hl=en",
   "displayLink": "www.google.com",
   "snippet": "Ramada Limited Vancouver Downtown",
   "htmlSnippet": "Ramada Limited \u003cb\u003eVancouver\u003c/b\u003e Downtown",
   "mime": "image/",
   "image": {
    "contextLink": "https://www.google.com/mymaps/viewer?mid=1B41Gt1WF8xLcJyfvc38rj8LBKgA&hl=en",
    "height": 520,
    "width": 504,
    "byteSize": 71067,
    "thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_R6h1Kx-ClxwwdjQ96P31JIdEfg_MgFnTA82X3l9T_YwnBHe3NZ30Pd4g",
    "thumbnailHeight": 131,
    "thumbnailWidth": 127
   }
  },
  {
   "kind": "customsearch#result",
   "title": "Vancouver Bike Route Stanley Park Seawall",
   "htmlTitle": "\u003cb\u003eVancouver\u003c/b\u003e Bike Route Stanley Park Seawall",
   "link": "https://www.google.com/maps/d/thumbnail?mid=14dxTKK_5KAhFsRhgdfVm9IBUSFo&hl=en_US",
   "displayLink": "www.google.com",
   "snippet": "Vancouver Bike Route Stanley Park Seawall",
   "htmlSnippet": "\u003cb\u003eVancouver\u003c/b\u003e Bike Route Stanley Park Seawall",
   "mime": "image/",
   "image": {
    "contextLink": "https://www.google.com/mymaps/viewer?mid=14dxTKK_5KAhFsRhgdfVm9IBUSFo&hl=en_US",
    "height": 520,
    "width": 504,
    "byteSize": 56235,
    "thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSXPIwRIMWTkV2awxaXIGDSL0asRPMSGm3LTMPlChkGvfJywWuDY_YwP53F",
    "thumbnailHeight": 131,
    "thumbnailWidth": 127
   }
  },
  {
   "kind": "customsearch#result",
   "title": "Gowalla Walking Tour of Vancouver",
   "htmlTitle": "Gowalla Walking Tour of \u003cb\u003eVancouver\u003c/b\u003e",
   "link": "https://www.google.com/maps/d/thumbnail?mid=18ob0bMMVH84t36U1_A3_jFbcx58&hl=en",
   "displayLink": "www.google.com",
   "snippet": "Gowalla Walking Tour of Vancouver",
   "htmlSnippet": "Gowalla Walking Tour of \u003cb\u003eVancouver\u003c/b\u003e",
   "mime": "image/",
   "image": {
    "contextLink": "https://www.google.com/mymaps/viewer?mid=18ob0bMMVH84t36U1_A3_jFbcx58&hl=en",
    "height": 520,
    "width": 504,
    "byteSize": 54143,
    "thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmVpAm7SR0tSWPVMibBl3W6yEvYtnup8zn9ccWVvPZNRPF8w9EGM1unBGg",
    "thumbnailHeight": 131,
    "thumbnailWidth": 127
   }
  },
  {
   "kind": "customsearch#result",
   "title": "VANCOUVER MURAL FESTIVAL MURAL MAP",
   "htmlTitle": "\u003cb\u003eVANCOUVER\u003c/b\u003e MURAL FESTIVAL MURAL MAP",
   "link": "https://www.google.com/maps/d/thumbnail?mid=1ur3X4PbXsGyg0aKhNNwEq03itN0&hl=en_US",
   "displayLink": "www.google.com",
   "snippet": "VANCOUVER MURAL FESTIVAL MURAL MAP",
   "htmlSnippet": "\u003cb\u003eVANCOUVER\u003c/b\u003e MURAL FESTIVAL MURAL MAP",
   "mime": "image/",
   "image": {
    "contextLink": "https://www.google.com/mymaps/viewer?mid=1ur3X4PbXsGyg0aKhNNwEq03itN0&hl=en_US",
    "height": 520,
    "width": 504,
    "byteSize": 129311,
    "thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR6DGPUW2U6pDAUmuVz_DR7cxU-LPUdMrOzbN2E0GHE8_FegyyHhvdOSX4V",
    "thumbnailHeight": 131,
    "thumbnailWidth": 127
   }
  },
  {
   "kind": "customsearch#result",
   "title": "Best Western Hotel Downtown Vancouver",
   "htmlTitle": "Best Western Hotel Downtown \u003cb\u003eVancouver\u003c/b\u003e",
   "link": "https://www.google.com/maps/d/thumbnail?mid=1p-nRfVmGJpViUr4zPovQcaSTdeE&hl=en_US",
   "displayLink": "www.google.com",
   "snippet": "Best Western Hotel Downtown Vancouver",
   "htmlSnippet": "Best Western Hotel Downtown \u003cb\u003eVancouver\u003c/b\u003e",
   "mime": "image/",
   "image": {
    "contextLink": "https://www.google.com/mymaps/viewer?mid=1p-nRfVmGJpViUr4zPovQcaSTdeE&hl=en_US",
    "height": 520,
    "width": 504,
    "byteSize": 53972,
    "thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQhQD8cRDrRL2bPYEycxl55FqUCco8vCYkq1pfx4JYXHWXRe_s9Ttzy7Xc",
    "thumbnailHeight": 131,
    "thumbnailWidth": 127
   }
  },
  {
   "kind": "customsearch#result",
   "title": "Carmana Plaza Hotel Vancouver",
   "htmlTitle": "Carmana Plaza Hotel \u003cb\u003eVancouver\u003c/b\u003e",
   "link": "https://www.google.com/maps/d/thumbnail?mid=1qf-nG5qQI0beJIftB7jWRSfIcHw&hl=en",
   "displayLink": "www.google.com",
   "snippet": "Carmana Plaza Hotel Vancouver",
   "htmlSnippet": "Carmana Plaza Hotel \u003cb\u003eVancouver\u003c/b\u003e",
   "mime": "image/",
   "image": {
    "contextLink": "https://www.google.com/mymaps/viewer?mid=1qf-nG5qQI0beJIftB7jWRSfIcHw&hl=en",
    "height": 520,
    "width": 504,
    "byteSize": 56307,
    "thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSEJBHFdUcUqMOLmHXj1acSwI0GLNniL8poTF9xKiIJUFV3US8vDUesTWc",
    "thumbnailHeight": 131,
    "thumbnailWidth": 127
   }
  },
  {
   "kind": "customsearch#result",
   "title": "Seismic building risk in Vancouver",
   "htmlTitle": "Seismic building risk in \u003cb\u003eVancouver\u003c/b\u003e",
   "link": "https://www.google.com/maps/d/thumbnail?mid=1AzDOrFqjnR5qKqAkBnbqGDlbc_8&hl=en_US",
   "displayLink": "www.google.com",
   "snippet": "Seismic building risk in Vancouver",
   "htmlSnippet": "Seismic building risk in \u003cb\u003eVancouver\u003c/b\u003e",
   "mime": "image/",
   "image": {
    "contextLink": "https://www.google.com/mymaps/viewer?mid=1AzDOrFqjnR5qKqAkBnbqGDlbc_8&hl=en_US",
    "height": 520,
    "width": 504,
    "byteSize": 62217,
    "thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvOomFOVNoIc6fVOBhyS9HXh3S5KkbxbvJw2EtkKjlNoVGF0Y7wlU8F9kC",
    "thumbnailHeight": 131,
    "thumbnailWidth": 127
   }
  },
  {
   "kind": "customsearch#result",
   "title": "1607- 1420 W. Georgia St, Vancouver",
   "htmlTitle": "1607- 1420 W. Georgia St, \u003cb\u003eVancouver\u003c/b\u003e",
   "link": "https://www.google.com/maps/d/thumbnail?mid=1b4WGaMzNOARvuejyduraaT-9Nhg&hl=en",
   "displayLink": "www.google.com",
   "snippet": "1607- 1420 W. Georgia St, Vancouver",
   "htmlSnippet": "1607- 1420 W. Georgia St, \u003cb\u003eVancouver\u003c/b\u003e",
   "mime": "image/",
   "image": {
    "contextLink": "https://www.google.com/mymaps/viewer?mid=1b4WGaMzNOARvuejyduraaT-9Nhg&hl=en",
    "height": 520,
    "width": 504,
    "byteSize": 59096,
    "thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQaKK52bEj0-tvFOOJw3kbqZoChXiWeQ9-wLoccNHNHQpOqaKwNSEk4wvM",
    "thumbnailHeight": 131,
    "thumbnailWidth": 127
   }
  },
  {
   "kind": "customsearch#result",
   "title": "Correctional Centres in British Columbia",
   "htmlTitle": "Correctional Centres in British Columbia",
   "link": "https://www.google.com/maps/d/thumbnail?mid=1Xiubw4z5fACCpd5z71ubgUwz5f8&hl=en_US",
   "displayLink": "www.google.com",
   "snippet": "Correctional Centres in British Columbia",
   "htmlSnippet": "Correctional Centres in British Columbia",
   "mime": "image/",
   "image": {
    "contextLink": "https://www.google.com/mymaps/viewer?mid=1Xiubw4z5fACCpd5z71ubgUwz5f8&hl=en_US",
    "height": 520,
    "width": 504,
    "byteSize": 62990,
    "thumbnailLink": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTR0gMZSVrF7H2n1JcfXxbZ25ZgOsc7iW2hsYltXGAYP5bwukZCfcNXyKQ",
    "thumbnailHeight": 131,
    "thumbnailWidth": 127
   }
  }
 ]
}

Upvotes: 0

Views: 1711

Answers (1)

Jonathan Portorreal
Jonathan Portorreal

Reputation: 2826

Make sure you have your search engine customized correctly.

Update your search engine and make sure you have image search enabled

google

You also want to make sure you have at least one site added in sites to search (below I added google.com)

google

then you get a response like this 

{
    "kind": "customsearch#search",
    "url": {
        "type": "application/json",
        "template": ""
    },
    "queries": {
        "request": [
            {
                "title": "Google Custom Search - city",
                "totalResults": "297000000",
                "searchTerms": "city",
                "count": 10,
                "startIndex": 1,
                "inputEncoding": "utf8",
                "outputEncoding": "utf8",
                "safe": "off",
                "cx": "000938323173939893608:mrtwb_hl8cu"
            }
        ],
        "nextPage": [
            {
                "title": "Google Custom Search - city",
                "totalResults": "297000000",
                "searchTerms": "city",
                "count": 10,
                "startIndex": 11,
                "inputEncoding": "utf8",
                "outputEncoding": "utf8",
                "safe": "off",
                "cx": "000938323173939893608:mrtwb_hl8cu"
            }
        ]
    },
    "context": {
        "title": "Google"
    },
    "searchInformation": {
        "searchTime": 0.400265,
        "formattedSearchTime": "0.40",
        "totalResults": "297000000",
        "formattedTotalResults": "297,000,000"
    },
    "items": [
        {
            "kind": "customsearch#result",
            "title": "Yarra City Council Boundary",
            "htmlTitle": "Yarra <b>City</b> Council Boundary",
            "link": "https://www.google.com/mymaps/viewer?mid=1X8_ONIG08PtjQ--SOiAD9Xk8mM8&hl=en",
            "displayLink": "www.google.com",
            "snippet": "Yarra City Council Boundary.",
            "htmlSnippet": "Yarra <b>City</b> Council Boundary.",
            "cacheId": "V02kFnMgkfgJ",
            "formattedUrl": "https://www.google.com/mymaps/viewer?mid=1X8...hl=en",
            "htmlFormattedUrl": "https://www.google.com/mymaps/viewer?mid=1X8...hl=en",
            "pagemap": {
                "cse_thumbnail": [
                    {
                        "width": "221",
                        "height": "228",
                        "src": "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQUjeu8rgqsWGc4u_XkQNcBRull03-9xL9KEUehjmnglOC2op3eS9pkmZ4"
                    }
                ],
                "website": [
                    {
                        "name": "Yarra City Council Boundary",
                        "description": "Yarra City Council Boundary",
                        "url": "https://www.google.com/maps/d/viewer?mid=1X8_ONIG08PtjQ--SOiAD9Xk8mM8&hl=en",
                        "image": "https://www.google.com/maps/d/thumbnail?mid=1X8_ONIG08PtjQ--SOiAD9Xk8mM8&hl=en"
                    }
                ],
                "metatags": [
                    {
                        "viewport": "initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0,width=device-width",
                        "og:type": "website",
                        "og:title": "Yarra City Council Boundary",
                        "og:description": "Yarra City Council Boundary",
                        "og:url": "https://www.google.com/maps/d/viewer?mid=1X8_ONIG08PtjQ--SOiAD9Xk8mM8&hl=en",
                        "og:image": "https://www.google.com/maps/d/thumbnail?mid=1X8_ONIG08PtjQ--SOiAD9Xk8mM8&hl=en",
                        "twitter:card": "summary_large_image",
                        "twitter:title": "Yarra City Council Boundary",
                        "twitter:description": "Yarra City Council Boundary",
                        "twitter:image:src": "https://www.google.com/maps/d/thumbnail?mid=1X8_ONIG08PtjQ--SOiAD9Xk8mM8&hl=en"
                    }
                ],
                "cse_image": [
                    {
                        "src": "https://www.google.com/maps/d/thumbnail?mid=1X8_ONIG08PtjQ--SOiAD9Xk8mM8&hl=en"
                    }
                ]
            }
        },

        ...
                ]
            }
        }
    ]
}

working code

heres some code that gets images from the pagemap object if you look in the imageobject property you'll get your images.

// angular to show images 
var app = angular.module("app", []);

app.controller("image-query", function($scope) {

  $scope.settings = {
    async: true,
    crossDomain: true,
    url: "https://www.googleapis.com/customsearch/v1?",
    data: {
      key: "AIzaSyAh7eEvk6WpvUXd7gFP0dZnLJNSfiKJ2Us",
      cx: "000938323173939893608:evp8tltzv_y"
    },
    method: "GET"
  };

  $scope.query = "";
  $scope.images = [];
  $scope.exts = ["jpg", "png", "jpeg", "gif"];

  $scope.updateImages = function() {
    $scope.settings.data.q = $scope.query

    $.ajax($scope.settings).done(function(res) {
      // empty images from last query
      $scope.images = [];
      var results = res.items;
      // image may or may not have imageobject
      results.forEach(i => {
        if (i.pagemap.imageobject) {
          i.pagemap.imageobject.forEach(o => {
            if (o.url && $scope.exts.some(ext => o.url.includes(ext))) {
              $scope.images.push(o.url);
              $scope.$apply();
            }
          })
        }
      });

      // uncomment to see logged images
      // console.dir($scope.images);
    })
  }

});
#root {
  display: flex;
  align-items: center;
  flex-direction: column;
}

#image-gallery {
  width: 100%;
  height: 300px;
  margin: 10px;
}

#image-gallery li {
  list-style-type: none;
  display: inline;
  overflow-y: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="root" ng-app="app" ng-controller="image-query">
  <h1>Search Images</h1>
  <input ng-model="query" id="search" placeholder="search an image" />
  <br/>
  <button ng-click="updateImages()">Search</button>
  <hr width="100%" />
  <ul id="image-gallery" height="100%">
    <li ng-repeat="img in images track by $index" ng-model="images">
      <img height="100px" width="100px" src="{{img}}" />
    </li>
  </ul>
</div>

Upvotes: 0

Related Questions