Google place Api PlaceDetails Photo Reference

Question

I am using Google Place Api where is on some results "photo_reference" (similar to "reference") value. I cannot find any mention about that how to use it to get that photo. I know how to use "reference" to get PlaceDetail and I am sure that usage of photo_reference will be similar, but I cannot find JSON/XML URL for this photo_reference request. Thank you for any help. Pavel

Answer 1

Please take a look at documentation here: https://developers.google.com/places/documentation/photos

They've just announced this new Place Photos feature

In short this is how you should use this new feature:

https://maps.googleapis.com/maps/api/place/photo?photoreference=PHOTO_REFERENCE&sensor=false&maxheight=MAX_HEIGHT&maxwidth=MAX_WIDTH&key=YOUR_API_KEY

just substitute your own values in place of:

• PHOTO_REFERENCE
• MAX_HEIGHT - int value from 1 to 1600
• MAX_WIDTH - int value from 1 to 1600
• YOUR_API_KEY

and you are done

Answer 2

The Places API now supports the return of one place photo if available for a Place Search request and up to ten place photos for a Place Details request.

If a photos array is returned with your request, you can pass the photo_reference from a contained photo object to a Place Photo request with the maxheight and/or maxwidth, sensor and key parameters:

https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=CnRvAAAAwMpdHeWlXl-lH0vp7lez4znKPIWSWvgvZFISdKx45AwJVP1Qp37YOrH7sqHMJ8C-vBDC546decipPHchJhHZL94RcTUfPa1jWzo-rSHaTlbNtjh-N68RkcToUCuY9v2HNpo5mziqkir37WU8FJEqVBIQ4k938TI3e7bf8xq-uwDZcxoUbO_ZJzPxremiQurAYzCTwRhE_V0&sensor=false&key=AddYourOwnKeyHere

Please see the documentation for more details.

Answer 3

please bear in mind that there are no free photo requests anymore. At this moment (November 2020), it is $7.0 for 1000 requests (if your volume is up to 100,000). Check the photo below.

Read more on Google Places billing info page.

Answer 4

Step 1: The URL you should use to call Google Place Photos is :

String url = https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=PHOTOREF&key=YOUR_API_KEY

Refer: https://developers.google.com/places/web-service/photos

Step 2: Since the above URL redirects to another URL, use HTTPClient, as it automatically handles redirect stuff.

Code:

DefaultHttpClient hc = new DefaultHttpClient();
HttpGet httpget = new HttpGet(url);
HttpContext context = new BasicHttpContext();
hc.setRedirectHandler(new DefaultRedirectHandler() {
 @Override
 public URI getLocationURI(HttpResponse response,
 HttpContext context) throws org.apache.http.ProtocolException {

  //Capture the Location header here - This is your redirected URL
  System.out.println(Arrays.toString(response.getHeaders("Location")));

  return super.getLocationURI(response,context);

  }
 });

 // Response contains the image you want. If you test the redirect URL in a browser or REST CLIENT you can see it's data
 HttpResponse response = hc.execute(httpget, context);
 if(response.getStatusLine().getStatusCode() == 200) {
   // Todo: use the Image response 
   HttpEntity entity = response.getEntity();
   if (entity != null) {
     InputStream instream = entity.getContent();
     Bitmap bmp = BitmapFactory.decodeStream(instream);         
     ImageView imageView = new ImageView(context);
     imageView.setImageBitmap(bmp);
     images.add(imageView);
     instream.close();
  }                 
 }
 else {
   System.out.println(response.getStatusLine().getStatusCode()+"");
 }

Hope this helps everyone.

Answer 5

After initiating map you can get place details with it's images

const service = new window.google.maps.places.PlacesService(map);
service.getDetails(
  {
    placeId: "some_place_id_here"
  },
  (data, status) => {
    if (status === window.google.maps.places.PlacesServiceStatus.OK) {
      data.photos &&
        data.photos.forEach(photo => {
          console.log(photo.getUrl({ maxWidth: 500, maxHeight: 500 }));
        });
    }
  }
);

Answer 6

Solving the PhotoReference issue for Javascript

User @R.K solved this issue in java, however in js you need to use fetch(). Here's the code I used:

await fetch(proxyUrl+url).then(async(ref)=>{

await ref.blob()}).then((image)=>{

// do what you need to do
console.log(image)

}).catch((err)=>{
  console.log(err);
})

In this, I used a heroku link for the proxyUrl and the url shown in @Chriss Green's post for url. Hope this helps anyone confused using js!