

AngularJSでGoogleMapAPIを用いてJSON形式のレスポンスを取得したいのですが、  
コンソールに"Uncaught SyntaxError: Unexpected token :"とエラー表示されます。  
レスポンスのJSONに":"が存在する為、このエラーが発生するのでしょうか？  
解決方法はありますでしょうか？

どなたかわかる方いらっしゃいましたら、  
ご教示いただけると幸いです。

よろしくお願いいたします。

\---------- ソース ----------

[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;
    
[/code]

\---------- コンソール出力 ----------

[code]

    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
    
[/code]

\---------- コンソールのリンク先（GoogleMapsAPIのレスポンス） ----------

[code]

    {
       "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"
    }
    
[/code]


CC BY-SA 3.0
2015-09-04T10:04:35.420
16247
2016-10-03T12:03:31.503
2015-10-10T15:51:18.770
76
12198
question
angularjs google-maps
GoogleMapsAPIをJSON形式で取得　→　”Uncaught SyntaxError: Unexpected token : ”


レスポンスのJSONは問題ないように見えます。  
それよりは実際に使われるURLの末尾  
`&callback=angular.callbacks._0:2`  
の`:2`が怪しい気がします。

Jsonpメソッド呼び出しを次のようにしてみてはいかがでしょうか。

[code]

     $http.jsonp('https://maps.googleapis.com/maps/api/distancematrix/json?origins=Tokyo&destinations=Kyoto&mode=Driving&sensor=false&callback=JSON_CALLBACK')
    .[ここから先は同じ]
    
[/code]


CC BY-SA 3.0
2015-09-10T15:00:37.093
16482
2016-10-03T12:03:31.503
2016-10-03T12:03:31.503
3974
12233
16247
answer


AngularJSを使用した経験がないため、的はずれであればごめんなさい。

コンソール出力にある、APIのリクエストに使われたURLをブラウザで表示すると、質問者さんの投稿にあるとおりのレスポンスが返ってきています。しかし、Googleマップが返しているレスポンスはJSON形式であるのに対し、[Qiitaに投稿されていたこちらの記事](http://qiita.com/laiso/items/19c722b5bea6838f5ad8)では、`$http.jsonp`メソッドが受け取るレスポンスは、メソッド名の通りJSONP形式であるべきなように見えます。

JSONPとJSONの差は、JSON形式ではデータ全体が純粋なJSONフォーマットに準拠しているのに対し、JSONP形式では、リクエスト時に指定されたJavascript関数の呼び出しの際に、引数としてJSONフォーマットのデータを呼び出す
**Javascriptコード**
である点です（詳しくは[こちらの記事](http://taiju.hatenablog.com/entry/20090902/1251851867)がわかりやすいかと思われます）。エラーメッセージとの整合性がとれるかよくわからないのですが、JSONP形式のデータが渡されるべきところにJSON形式のデータが渡されているのが原因ではないかと考えています。

[こちらの記事](http://qiita.com/hkusu/items/61127838300d1b429091)では、`$http`を使用してJSONを取得しています。souzさんの回答のようなURLの修正をされてなお動いていなければ、こちらをお試しいただければと思います。


CC BY-SA 3.0
2016-04-08T00:23:06.220
23832
2016-04-08T00:23:06.220
7229
16247
answer