Nodejs) How to get image with Google Place Photo API?

Question

I am trying to use Google Place Photos API to retrieve images I managed to get photo references dynamically, but I am not really sure how to retrieve image using this API.

async function getImageOfPlace(place){
try{
  const response = await fetch('https://maps.googleapis.com/maps/api/place/photo? 
   maxwidth=400&photo_reference='+place+'&key='+apiKey);
   //const json = await response.json();
   console.log(response);
 }catch(e){
   console.log(e);
}
}

Code above shows such response:

Response {
 [Symbol(realm)]: null,
 [Symbol(state)]: {
   aborted: false,
   rangeRequested: false,
   timingAllowPassed: true,
   requestIncludesCredentials: false,
   type: 'default',
   status: 200,
   timingInfo: {
     startTime: 2738.1868999004364,
     redirectStartTime: 2738.1868999004364,
     redirectEndTime: 2909.6113998889923,
     postRedirectStartTime: 2909.6113998889923,
     finalServiceWorkerStartTime: 0,
     finalNetworkResponseStartTime: 0,
     finalNetworkRequestStartTime: 0,
     endTime: 0,
     encodedBodySize: 1125,
     decodedBodySize: 773,
     finalConnectionTimingInfo: null
   },
   cacheState: '',
   statusText: 'OK',
   headersList: HeadersList {
     [Symbol(headers map)]: [Map],
     [Symbol(headers map sorted)]: null
   },
   urlList: [ [URL], [URL] ],
   body: { stream: undefined }
 },
 [Symbol(headers)]: HeadersList {
   [Symbol(headers map)]: Map(16) {
     'access-control-expose-headers' => 'Content-Length',
     'content-disposition' => 'inline;filename="2019-12-07.jpg"',
     'vary' => 'Origin',
     'access-control-allow-origin' => '*',
     'timing-allow-origin' => '*',
     'x-content-type-options' => 'nosniff',
     'server' => 'fife',
     'content-length' => '13767',
     'x-xss-protection' => '0',
     'date' => 'Wed, 06 Jul 2022 16:49:15 GMT',
     'expires' => 'Thu, 07 Jul 2022 16:49:15 GMT',
     'cache-control' => 'public, max-age=86400, no-transform',
     'etag' => '"v2041"',
     'content-type' => 'image/jpeg',
     'age' => '428',
     'alt-svc' => 'h3=":443"; ma=2592000,h3-29=":443"; ma=2592000,h3-Q050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"'
   },
   [Symbol(headers map sorted)]: null
 }
}

How do I get image or url of the image of the response?

Somebody has told that I can do call directly, putting API url inside image src

<img src='https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photo_reference='+image+'&key='+apiKey'/>

but I don't think I can do this because storing apiKey in client side, as far as I know it is very very dangerous

Any good ideas how to retrieve image using this API?

Answer 1

You'll likely have to get the proper index of the image URL from the response using the [] operator. The docs indicate it could return up to ten images.

The response to these requests will contain a photos[] field if the place has related photographic content.

So something like

return response[1]['urlList'][0]

or wherever the first URL comes back.