GET request intentionally by Google does not work on the Detailed Place JSON request, so i tried going round it by doing the following:
const detailedView = () => {
const urlList = [];
for (var i = 0; i < search_place.length; i++) {
urlList.push(`https://maps.googleapis.com/maps/api/place/details/json?placeid=${search_place[i].place_id}&key=${googleKey}`);
}
const scTag = document.getElementById('Detailed__Request');
scTag.setAttribute('src', `${urlList[2]}`);
}
<script id="Detailed_Request" async defer></script>
So 'search_place' holds the list of objects that was returned by the places API, from there i pushing the link with the unique 'place_id' into an array 'urlList'.
Then as a test i'm manually add one of the url's to the script tag and that returns the JSON:
How can i actually access this data?
Any help will be appreciated :)
EDIT:
@Brett DeWoody (thanks for the reply)
So i just added the async GET request:
const xhr = new XMLHttpRequest();
xhr.open('GET', urlList[2], true);
xhr.send(null);
console.log(xhr.responseText);
I get the following error:
Failed to load https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJabZ3FaUcdkgRoxxbahDO3bM&key=AIzaSyDqESELOJEOnNFFhWFsQG8fvuVAe_9WffM: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
After Googling that i found at that its intentionally being blocked.