JSONP和Google Maps Directions API

Question

I'm trying to hit the Google maps directions API using jquery $.ajax.

I can see in my dev tools that the XHR request is finished, but I think there is an issue with JSON.parse in the way jquery Ajax handles it.

Here is my code:

http://codepen.io/jrdnndtsch/pen/Byrxxo

$.ajax({
  url:'https://maps.googleapis.com/maps/api/directions/json?origin=Toronto&destination=Montreal&&callback=?&sensor=false',
  type: 'GET',
  dataType: 'jsonp',
  success: function(data){
    console.log("it worked");
    console.log(data);
  }
});

So, the URL is correct - I can even see it data in dev tools, but I get this error:

Uncaught SyntaxError: Unexpected token :

I've googled my brains out and really need some direction on where to go next. Any help?

Answer 1

it looks like the url is being modified from what you are sending to add a ":2" on the end, which is the source of the error, not the JSON that returns. not sure why that is happening though. I know it's not a real answer, but it at least answers why that error is happening.

EDIT:

I think you need an API key to accept the json in the way you have your code written, otherwise you will get the cross domain issue

$.ajax({
  url:'https://maps.googleapis.com/maps/api/directions/json?origin=Toronto&destination=Montreal&&callback=?&sensor=false&key=YOUR-API-KEY',
  type: 'GET',
  dataType: 'json'
})
.done(function(data){
    console.log("it worked");
    console.log(data);
});