CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-places-api
greysongy
greysongy

Reputation: 73

Understanding the response from the Google Places Photos API

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.

Upvotes: 2

Views: 1362

Answers (2)

IsleBeeGun
IsleBeeGun

Reputation: 43

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?

Upvotes: 1

evan
evan

Reputation: 5691

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!

Upvotes: 2

Related Questions