Get GoogleMapsAPI in JSON format → "Uncaught SyntaxError: Unexpected token:"

I would like to get a response in JSON format using GoogleMapAPI in AngularJS.
On the console, the error "Uncaught SyntaxError: Unexpected token:"
Does this error occur because ":" exists in the response JSON?
Is there a solution?

If anyone knows,
I would appreciate it if you could let me know.

Thank you for your cooperation.

----------------- Source -----------

var preferred=$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);
            default.resolve(data);   
        }).error(function(data,status,headers,config){
            default.reject(status);
        });

        return default.promise;

----------- Console output ---------

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

----------- Console link (GoogleMapsAPI response) -------------

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

angularjs google-maps

2022-09-30 19:23

2 Answers

I have no experience using AngularJS, so I'm sorry if it's off the mark.

In the console output, when you view the URL used for API requests in your browser, you will receive the same response as the questioner's post.However, in this article posted on Qiita, the response that the $http.jsonp method receives appears to be JSONP format, as the method name suggests.

The difference between JSONP and JSON is that in JSON format the entire data complies with the pure JSON format, whereas in JSONP format the Javascript code invokes data in JSON format as an argument when calling the Javascript function specified at request (more in ).I'm not sure if it's consistent with the error message, but I think it's because the JSON format data is passed where it should be.

This article uses $http to retrieve JSON.If the URL like the one you answered is still not working, please try this one.

2022-09-30 19:23

JSON in the response looks fine.
Rather than that, the end of the actual URL
&callback=angular.callbacks._0:2
I think :2 in is suspicious.

Why don't you make a Jsonp method call as follows?

$http.jsonp('https://maps.googleapis.com/maps/api/distancematrix/json?origins=Tokyo&destinations=Kyoto&mode=Driving&sensor=false&callback=JSON_CALLBACK')
. [It's the same from here]

2022-09-30 19:23

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656