GoogleMapsAPI's JSON "Uncaught SyntaxError: Unexpected token :"

Question

I'm studying AngularJS. I'm trying to get GoogleMapsAPI in JSON response format. but Chrome reports "Uncaught SyntaxError: Unexpected token : ".

So far I am just trying to connect and see the objects information using the following code:

var deferred = $q.defer();

    $http.jsonp('https://maps.googleapis.com/maps/api/distancematrix/json?origins=Tokyo&destinations=Kyoto&mode=Driving&sensor=false', {
        params: {
            callback: 'JSON_CALLBACK'
        }
    }).success(function(response){
        console.dir(data,status,headers,config);
        deferred.resolve(data);   
    }).error(function(data,status,headers,config){
        deferred.reject(status);
    });

    return deferred.promise;

The JSON is coming back in the response, but Chrome reports "Uncaught SyntaxError: Unexpected token : " I keep getting the following error in the console:

Uncaught SyntaxError: Unexpected token : (18:20:02:095 | error, javascript)
  at https://maps.googleapis.com/maps/api/distancematrix/json?origins=Tokyo&destinations=Kyoto&mode=Driving&sensor=false&callback=angular.callbacks._0:2

GoogleMapsApi's JSON Response:

    {
   "destination_addresses" : [ "Kyoto, Kyoto Prefecture, Japan" ],
   "origin_addresses" : [ "Tokyo, Japan" ],
   "rows" : [
      {
         "elements" : [
            {
               "distance" : {
                  "text" : "457 km",
                  "value" : 456931
               },
               "duration" : {
                  "text" : "5 hours 39 mins",
                  "value" : 20338
               },
               "status" : "OK"
            }
         ]
      }
   ],
   "status" : "OK"
}

If I navigate directly to url itself, the JSON is returned and is displayed in the browser.

Any ideas why I can't get this error and I never make it to the success callback?

score 0 · Accepted Answer · edited May 23 '17 at 12:24

0

It looks like Google's Distance Matrix API returns JSON, not JSONP.

What are the differences between JSON and JSONP?

Maybe try a normal $http.get() call; Angular will automatically parse the JSON response:

var promise = $http.get('https://maps.googleapis.com/maps/api/distancematrix/json?origins=Tokyo&destinations=Kyoto&mode=Driving&sensor=false')
    .then(function(response){
        var data = response.data,
            status = response.status,
            headers = response.headers,
            config = response.config;
        console.dir(data,status,headers,config);
        return data; 
    }, function(response){
        var status = response.status;
        return status;
    });

return promise;

edited May 23 '17 at 12:24

Community

1
1

answered Sep 05 '15 at 00:39

Tyler Eich

4,239
3
21
45

I didn't know the difference between JSON and JSONP. Thanks! And I tried your advice , it was not possible. Please Can you check for this Link?https://jsfiddle.net/dt70sm/oa4h999w/1/ – y.yamaguchi Sep 05 '15 at 02:10
You're running into a [CORS](http://enable-cors.org) issue. To bypass this, you can use [a Chrome extension](https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related?hl=en) to disable the Same-Origin policy. This will lower your browser's security, so use the extension only as needed ;-) – Tyler Eich Sep 05 '15 at 02:56
Thankyou for your answer. Jsfiddle's sample is work by this extention. I gonna use this extention when need. Thankyou! :D – y.yamaguchi Sep 05 '15 at 07:42

GoogleMapsAPI's JSON "Uncaught SyntaxError: Unexpected token :"

1 Answers1