Google Places photo doesnt return an image

Viewed 44

i was trying to get an image back from the api call, but it doesnt return an image, instead i receive a link to an html with the image i have requested. How can i get only the image? Here's the code, the "foto" parameter is the photo_reference i obtain with the google place id api call

async function getFoto(foto){

const api_key="mykey"
try {
let response = await axios.get("https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photo_reference="+foto+"&key="+api_key)
   console.log("https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photo_reference="+foto+"&key="+api_key)
return Promise.resolve(response)
}catch(error) {
    console.log(error)
    return Promise.reject
}

}

1 Answers

The response to the request is a redirect (302) to a (CDN) URL where the image is cached.

You'll need to follow the link to get to the image.

You can confirm this with curl:

FOTO="[YOUR-PHOTO-REFERENCE]"
KEY="[YOUR-API-KEY]"

curl \
--verbose \
--request GET \
"https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photo_reference=${FOTO}&key=${KEY}"

Yielding something of the form:

* Connected to maps.googleapis.com (142.250.69.202) port 443 (#0)
> GET /maps/api/place/photo?maxwidth=400&photo_reference={foto}&key={key} HTTP/2

< HTTP/2 302 
https://lh3.googleusercontent.com/places/{something}=s1600-w400
< content-type: text/html; charset=UTF-8
< 
<HTML><HEAD><meta http-equiv="content-type" content="text/html;charset=utf-8">
<TITLE>302 Moved</TITLE></HEAD><BODY>
<H1>302 Moved</H1>
The document has moved
<A HREF="https://lh3.googleusercontent.com/places/{something}=s1600-w400">here</A>.
</BODY></HTML>

NOTE there is a Google library for Places for Node.JS too (link). If you use Google's library, this will be handled automatically for you.

Related