Getting the URL of Google Place Photo from a GoogleMapsClient response

user_3667436 0
Viewed 5160

I'm building an API endpoint which will return details and a single photo of a Google place using express.js and Node.js client library for Google Maps API Web Services. The endpoint below returns details of a place and I'm having trouble retrieving the URL of a photo. Below is the code in question.

There are two requests to the google maps client:

  1. Get place details based on req.params.id and the details contain a photos array

  2. Get photo using the photo_reference from above

    var googleMapsClient = require('@google/maps').createClient({
  key: 'mykeyhere',
  Promise: Promise
});

exports.getGglPlace = function(req, res) {

googleMapsClient.place({
     placeid: req.params.id
}).asPromise()
.then((response) => {
  var venue = response.json.result

  if (venue.photos[0]) {
    googleMapsClient.placesPhoto({
      photoreference: venue.photos[0].photo_reference,
      maxwidth: 200
    }).asPromise()
    .then((photo) => {

      console.log("Photo:", photo); // this returns a massive chunk of data which I think contains the actual image object also
      venue.photoURL = photo.url; // this doesn't work

      res.send(venue);
    })
    .catch((err)=>{
      console.log("Error Getting Photo!", err);
      res.send(venue);
    })
  } else {
    res.send(venue);
  }
})
.catch((err) => {
  res.send(404);
})
}

Any idea how to obtain the URL from the response which is called photo in the code above?

If I try going to the API directly through the browser or Postman, the URL gets redirected to the actual source URL of the image, which is what I want to add to my venue object.

API request example: https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=CmRaAAAA8NPP1nJJ7RCzcQDGUrpBHJXlzlQkN74dcyQJ2ytVpeYIu47sR-8dfCjke1J5exP-HpkayaXOc26ShsVKkXOaJZBOdpmExUfCzUTIBN3x0uPfR5Nt3PnN-a3GoRVZ7YxKEhBvqXF356Tn9mBJ7lA_JQ_7GhQMKvZkOk-Rs9knsansx5yuhfIvsQ&sensor=false&key=mykeyhere

Redirects to (this is what I want photo.url to return): https://lh3.googleusercontent.com/p/AF1QipPVD12HA5FBnjmiqVLphYgjfPtIPydn4Ie-xGKr=s1600-w200

Any help is appreciated.

P.S. My first post here - sorry if I'm not clear enough with my question.

express google-maps javascript
5 Answers

you can do this

with axios

axios.get(url).then(res => {
  console.log(res.request._redirectable._options.href));
});

with node-fetch

fetch(url).then(res => {
  console.log(res.url);
});

IMPORTANT: make sure you have the package you use installed and required and make sure the url you use works in your browser.

user_62720610

This code below works on my clientside JS project. Thus, I am able to retrieve place data and its photos as useful link and push it into img src on my html. Maybe it could be useful.

   var service = new google.maps.places.PlacesService(map);
   service.nearbySearch({
        location: latlonNearby,
        radius: 500,
        type: NearbyTypes,
        keyword: ['kafe', 'caffe']
   }, callback);
   function callback(results, status) {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
        for (let i = 0; i < results.length; i++) {
           // I retrieved first added photo "photos[0]" //
           var placePhotoUrl = results[i].photos[0].getUrl({maxWidth:640}); 
           console.log(placePhotoUrl);
           // Then Do Whatever You Want with this placePhotoUrl //
           }
        }
    }
user_98392130

If you use postman, you must turn of settings->automatically follow redirects, then you'll se something like this 

   <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/p/blahblah">here</A>.
</BODY></HTML>

Follow url to find image.

user_74782260
Related