How to get around the CORS issue in Google's API?

I am working on an application where I have to fetch elevation for some points using Google’s elevation API and I am stuck on the infamous CORS problem.

var elevationUrl = 'https://maps.googleapis.com/maps/api/elevation/json?locations=39.7391536,-104.9847034&key=AIzaSyAgXFgUVR4Nia7pegX_0hcz0aNevCKAa58';

$.ajax({
    url: elevationUrl,
    type: 'GET',
    // dataType: 'JSONP',
    success: function(){
    }
});

For starters I just tried to query a fixed point. When I do this, I get a CORS alert in my browser’s console.

  • No Access-Control-Allow-Origin header is present on the requested resource
  • PDF.js CORS issue for S3 file
  • Why multiple OPTIONS request are sent, even if Access-Control-Allow-Origin is set to *?
  • Amazon S3 CORS Configuration XMLHttpRequest GET
  • CORS GET with custom headers: is it possible to get rid of OPTIONS
  • CORS GET returns an empty response body in Firefox
  • When I tried the dataType: 'JSONP', it works and I get a response from the API but my browser complains that the response has an error in the response which it doesn’t. Basically I am trying to parse JSON as JSONP which is why I am getting the syntax error in the response.

    What is the way around this? How to query the Elevation API via AJAX calls?

  • Unable to access partial video content through CORS to amazon EC2
  • Image from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy:
  • IOS 10.3.1 Chrome browser CORS fail
  • CORS HTTP redirects (30x) not followed by Android / iOS WebView
  • ElasticSearch Access-Control-Allow-Headers header is not present
  • How to use Fabric.js to save a canvas as an image