I am currently working on extracting the "photo_reference" from the JSON data provided below;
{
"html_attributions" : [],
"results" : [
{
"formatted_address" : "Bandar Seri Begawan, Brunei",
"geometry" : {
"location" : {
"lat" : 4.903052199999999,
"lng" : 114.939821
},
"viewport" : {
"northeast" : {
"lat" : 4.9665412,
"lng" : 115.0004731
},
"southwest" : {
"lat" : 4.845741299999999,
"lng" : 114.8757076
}
}
},
"icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/geocode-71.png",
"id" : "b4a5514750d9d7b0164125a220f5c111ae391f4d",
"name" : "Bandar Seri Begawan",
"photos" : [
{
"height" : 1200,
"html_attributions" : [
"\u003ca href=\"https://maps.google.com/maps/contrib/102574123639894598769\"\u003eSharaf Vallappuzha\u003c/a\u003e"
],
"photo_reference" : "CmRaAAAAKwcyWRgvz9w4IVkWulF7RtNl2bThJaCyfWbOI4hf8oQe-FKwLnpTh5VBbz2ZPo-fBusRkySxNZ2Pf2bfKoL_CljuTg4XnCwLfPxZU24ug-MEdilWgA4umy0nQvnmVs0gEhAFrFECNYCJUhZWvsUgEhRQGhSEcOjFed2pgTZBVDp1xEs-YIrWX",
"width" : 1600
}
],
"place_id" : "ChIJH3MLVLD1IjIRS-i6fMT4rO4",
"reference" : "ChIJH3MLVLD1IjIRS-i6fMT4rO4",
"types" : [ "locality", "political" ]
}
],
"status" : "OK"
}
To access this data I used this link in my browser.
However, when attempting to retrieve the photo reference with my JavaScript code below;
const targetUrl = `https://maps.googleapis.com/maps/api/place/textsearch/json?query=bandar+seri+begawan&key=API-KEY`;
fetch(targetUrl, {mode: 'no-cors'})
.then(response => response.json())
.then(function(response) {
console.log(response.results.photos.photo_reference)
})
.catch(e => {
console.log(e);
})
}
I encountered a "SyntaxError: "JSON.parse: unexpected end of data at line 1 column 1 of the JSON data"" error in the browser's console.
To troubleshoot, I removed the json() method as shown below:
fetch(targetUrl, {mode: 'no-cors'})
.then(response => response)
.then(function(response) {
console.log(response)
})
.catch(e => {
console.log(e);
})
This produced a different error in the browser console:
Response { type: "opaque", url: "", redirected: false, status: 0, ok: false, statusText: "", headers: Headers, body: null, bodyUsed: false }
It seems like the fetch() function returned empty. However, entering the URL directly into a browser does yield results.
Could there be a security setting related to Google that needs adjustment? Any insights on this issue would be greatly appreciated.