JavaScript: how to access photo result from Google Places API using photo reference

Question

I'm implementing a backend that uses the Google Places API, and I wish to retrieve photos of locations using photo reference, like this

My code so far looks like the follow, where I retrieve the photo reference from a separate API call before using it in the photo API call

const str = 'hotels in toronto';

// get photo reference
let config = {
    method: 'get',
    url: `https://maps.googleapis.com/maps/api/place/textsearch/json?
          query=${str}&key=${GOOGLE API KEY}`,
    headers: {}
}
let result = await axios(config);
let photo_ref = result.data.results[0]['photos'][0]['photo_reference']

// using photo reference to get photo
let photo_config = {
    method: 'get',
    url: `https://maps.googleapis.com/maps/api/place/photo?
          photo_reference=${photo_ref}&key=${GOOGLE API KEY}`,
    headers: {}
}

let photo_result = await axios(photo_config);
console.log(JSON.stringify(photo_result))

I am expecting photo_result to be in some JSON format, which contains the photo or an URL to the photo I want. But it instead produces an empty JSON. Anything I did wrong?

Answer 1

There is no JSON response. From the Place Photo response documentation:

The response of a successful Place Photo request will be an image. The type of the image will depend upon the type of the originally submitted photo.

Also, you don't need to send HTTP requests like that, you can use the Maps JavaScript API's Places Library, which provides a Place Photos feature with a PlacePhoto.getUrl() method.