I'm currently working on integrating the Google Maps API into a Vue.js project. I've encountered an issue with two Google Maps services: - The Time Zone API is functioning properly. - However, the Elevation API is giving me a Cross-Origin Read Blocking error.
I have tested the URL in Postman and attempted to use both Ajax and vue-resource without success.
The Elevation API is not working as expected.
axios
.get(
`https://maps.googleapis.com/maps/api/elevation/json?locations=${latitude},${longitude}&key=APIKEY`)
.then(response => {
console.log(response);
return response.result.elevation;
})
.catch(error => {
console.log(error);
});
The Time Zone API is functioning correctly.
axios
.get(
`https://maps.googleapis.com/maps/api/timezone/json?location=${place.latitude},${place.longitude}×tamp=${moment().unix()}&key=APIKEY`)
.then(response => {
console.log(response);
return response.result.elevation;
})
.catch(error => {
console.log(error);
});
The current result is:
-Access to XMLHttpRequest at 'https://maps.googleapis.com/maps/api/elevation/json?locations=51.49602489999999,-0.17026260000000093&key=APIKEY' from origin '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Additionally, there is a warning:
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://maps.googleapis.com/maps/api/elevation/json?locations=51.49602489999999,-0.17026260000000093&key=APIKEY with MIME type application/json