[GIS] CORS error when using Google Elevation API

ajaxgoogle-maps-api

I'm trying to use Google elevation API with an AJAX request. It doesn't work and when I do console.log(ajax.responseText) I'm getting this error :

Cross-Origin Request Blocking: The Same Origin policy does not allow you to view the remote resource located at https://maps.googleapis.com/maps/api/elevation/json?locations=39.7391536 , -104.9847034 & key = AIzaSyBXSbBWMZtGL2whXVC7T8wFhQcwcKGRuF4. Reason: The CORS header "Access-Control-Allow-Origin" is missing.

Does someone knows how to solve this problem ?

Best Answer

You can use a CORS proxy such as CORS-anywhere. A hosted CORS proxy can be found here (herokuapp.com). Usage is as follows (append location etc. yourself):

https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api/elevation/json

Related Solutions

[GIS] Google Maps API: Can’t load GeoJSON when inside a function

Try to catch you map in a log.

function loadCableGeom(){
  console.log(yourmap);
  _this.map.data.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/google.json');
  _this.map.data.setStyle({
    fillColor: 'green',
    strokeWeight: 1
  });
  console.log("LOAD");
}

If it doesn't work try to pass it into your function with a parameter function loadCableGeom(map). Maybe your _this.map doesn't work.

[GIS] Why doesn’t Leaflet have cross-origin error when adding WMS layer from GeoServer, but GetFeatureInfo using ajax does

Because that is the way CORS works! loading images is always (mostly) a safe operation so the browser doesn't care where you get them from. Loading a script (javascript or xml) is potentially dangerous and so to protect you from nice-safe-site.com loading code from very-dangerous-hacker-site.com while you aren't watching CORS prevents this.

So WMS (and WMTS) getMap requests are usually image requests and so don't worry the browser but getFeatureInfo is asking for a text based response so the browser wants you to be sure you know what is going on.

Best Answer

Related Solutions

[GIS] Google Maps API: Can’t load GeoJSON when inside a function

[GIS] Why doesn’t Leaflet have cross-origin error when adding WMS layer from GeoServer, but GetFeatureInfo using ajax does

Related Question