Understanding the response from the Google Places Photos API

Question

I'm making a call to the Google Place Photos API using jquery ajax, and retrieving a response based on a photo reference that was retrieved earlier. The request seems to be going through, but I don't understand the format of the response/how I could convert this into an image.

$.ajax({
        url: 'https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=CnRvAAAAwMpdHeWlXl-lH0vp7lez4znKPIWSWvgvZFISdKx45AwJVP1Qp37YOrH7sqHMJ8C-vBDC546decipPHchJhHZL94RcTUfPa1jWzo-rSHaTlbNtjh-N68RkcToUCuY9v2HNpo5mziqkir37WU8FJEqVBIQ4k938TI3e7bf8xq-uwDZcxoUbO_ZJzPxremiQurAYzCTwRhE_V0&key=myKey',
        method: 'GET'
    })
    .then(function(imageResponse) {
        console.log("Image response", imageResponse);
    })

The output is in the following format...

JFIF *ExifII*1Google XICC_PROFILEHappl scnrRGB XYZ acspAPPLappl -appl rXYZgXYZbXYZ0wtptDchadX,rTRC gTRC bTRC desc ncprt Adscm XYZ tK> XYZ Zs &XYZ (W 3XYZ R sf32B & lcurv3mlucenUS$ esES,LdaDK4 deDE, fiFI( frFU< itIT,rnlNL$noNO xptBR(JsvSE* jaJPkoKR2zhTW2zhCN Kameran RGB-profiiliRGB-profil f r Kamera0 0 0 RGB 0 0 0 0 0 0 exOMv j_ RGB r_icϏ Perfil RGB para C maraRGB-kameraprofilRGB-Profil f r Kamerasv g: RGB cϏ e N RGB-beskrivelse til KameraRGB-profiel Camera t T | RGB \\ |Perfil RGB de C meraProfilo RGB FotocameraCamera RGB ProfileProfil RVB de l appareil-phototextCopyright 2003 Apple Computer Inc., all rights reserved.descCamera RGB ProfileCamera RGB Profile

...and so forth for quite a while.

Answer 1

You should use the Place Photos client-side service from the JavaScript API's Places Library if you are coding in client-side JavaScript, to avoid CORS errors from same-origin policy.

Otherwise, the images you get from the Places Photos web service can be directly added to <img> sources as follows:

<img src="https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=CnRvAAAAwMpdHeWlXl-lH0vp7lez4znKPIWSWvgvZFISdKx45AwJVP1Qp37YOrH7sqHMJ8C-vBDC546decipPHchJhHZL94RcTUfPa1jWzo-rSHaTlbNtjh-N68RkcToUCuY9v2HNpo5mziqkir37WU8FJEqVBIQ4k938TI3e7bf8xq-uwDZcxoUbO_ZJzPxremiQurAYzCTwRhE_V0&key=YOUR_API_KEY"></img>

Also see these related questions:
Where do I retrieve the photo_reference value to make a Google Places Photos request?
How to get a an image of a place from a nearby search from google api with an angular app?

Hope this helps!

Answer 2

I've been digging this question for two days, searching for the way to fetch correctly with cors to Google Places Api (Photos) https://developers.google.com/places/web-service/photos

Little did I know, damn, all of that was a completely wrong approach. Fetch is not required at all!

 ... let checkedPhoto = spot.photos[0].photo_reference; checkedPhoto = `https://maps.googleapis.com/maps/api/place/photo?maxwidth=300&photoreference=${checkedPhoto}&key=${apiKey}`; ...

It's still black magic, as it is not clear how the string like this one: https://maps.googleapis.com/maps/api/place/photo?maxwidth=300&photoreference=${checkedPhoto}&key=${apiKey}

is turned into something like this https://lh3.googleusercontent.com/p/AF1QipMbYnOpzH_paZWB2UNUob07yY18tjLTtkzHTSMR=s1600-w400 inside img's src attribute?