Google Maps Javascript APIを利用して2点間の移動に要する時間を求めたい

よろしくおねがいします。

Google Maps Javascript APIを利用して2点間の移動に要する時間を求めたいです。

始めに地図が表示されており、ボタンをクリックすることであらかじめ用意されていた領域に出発地点と到着地点の移動に要する時間を表示させるプログラムです。
出発地点と到着地点はJavascript側のソースで指定してあります。

ソースは以下の通りです。

HTML5
1<!DOCTYPE html>
2<html>
3<head>
4  <title>googlemap</title>
5  <link rel="stylesheet" href="css/main.css">
6  <script src="https://maps.googleapis.com/maps/api/js?key=My Key"></script>
7  <script type ="text/javascript" src= "js/jquery-1.8.2.min.js"></script>
8  <script type ="text/javascript" src= "js/main.js"></script>
9</head>
10<body>
11  <article>
12      <div class="map-embed">
13        <div id="map-canvas">ここに地図が表示されます</div>
14      </div>
15
16      <div class="route">ここに情報が表示されます</div>
17    
18      <div class="search">
19        <BUTTON id="check">ここをクリックで時間を表示</BUTTON>
20      </div>
21  </article>
22</body>
23</html>

Javascript
1$(function(){
2    /*
3    ** 地図の表示
4    */
5    // キャンパスの要素を取得する
6    var canvas = $('#map-canvas')[0];
7    // var canvas = document.getElementById( 'map-canvas' );
8    // 中心の位置座標を指定する
9    var latlng = new google.maps.LatLng(35.792621,139.806513);
10
11    // 地図のオプションを設定する
12    var mapOptions = {
13        zoom: 15,   // ズーム値
14        center:latlng   // 中心の位置座標
15    }
16
17    // canvasに、mapOptionsの内容の地図のインスタンス(map)を作成する
18    var map = new google.maps.Map(canvas,mapOptions);
19
20
21    /*
22    ** 移動時間の取得・表示
23    */
24    $('#check').click(function(){
25
26      // リクエスト用のプロパティクラスを作成
27      var request = {
28        origin: null,      //出発地点のLatLngオブジェクト
29        destination: null, //到着地点のLatLngオブジェクト
30
31        //DRIVING=自動車,BICYCLING=自転車,TRANSIT=電車,WALKING=徒歩
32        travelMode: google.maps.DirectionsTravelMode.DRIVING
33      };
34
35      // DirectionsServiceのインスタンスを生成
36      var directionsService = new google.maps.DirectionsService();
37
38      // 出発地点・到着地点を決定
39      request.origin = new google.maps.LatLng(35.170967,136.882391);
40      request.destination = new google.maps.LatLng(35.169454,136.896331);
41
42      // レスポンス取得用のDirectionsDisplayクラスのインスタンスを生成
43      directionsDisplay = new google.maps.DirectionsRenderer();
44
45      // ルート検索の実行
46      directionsService.route(request, function(response, status){
47        if(status == google.maps.DirectionsStatus.OK){
48          directionsDisplay.setDirections(response);
49
50          currentDirections = directionsDisplay.getDirections();
51
52          var route = currentDirections.routes[0];
53
54          // 所要時間の計測
55          for(var i = 0; i < route.legs.length; i++){
56
57              //リクエストで指定されたUnitSystemを使用した、距離値の文字列表現
58              route.legs[i].distance.text;
59
60              route.legs[i].distance.value; //メートル単位の距離
61
62              route.legs[i].duration.text;  //所要時間の文字列
63              route.legs[i].duration.value; //秒単位の所要時間
64          }
65        }else{
66          alert('No')；
67        }
68
69        alert(route);
70
71      });
72    });
73
74});

現在、Javascript側の

if(status == google.maps.DirectionsStatus.OK)

この部分でelseに入って「No」がアラートで出力される状態です。
alert(route)に関しては、「undefined」と出力されています。
原因が分からずに困っています。

参考にさせていただいたサイトは

http://www.k-sugi.sakura.ne.jp/ajax/googlemap/3521/

こちらになります。

原因と対処法を教えていただきたいです。
よろしくお願いします。

Lhankor_Mhy

2016/11/08 05:04

alert('No')；のところを、alert(status)；に変更して実行すると、なんと表示されますか？

Lhankor_Mhy

2016/11/08 09:49

当方で実行してみたところ、1.5kmというレスポンスが返ってきました。

date

2016/11/08 09:59

alert('No')；をalert('NO');にしたらどうなりますか? ；(全角);(半角)とわかりにくいが異なっている

退会済みユーザー

2016/11/08 10:09

Lhankor_Mhy様 > 私の場合は「REQUEST_DENIED」というレスポンスが返ってきました。date様 > 「NO」と出力されました。

date

2016/11/08 10:11

コンソールを見て何か出ていませんか?

退会済みユーザー

2016/11/08 10:20

「This API project is not authorized to use this API. Please ensure this API is activated in the Google Developers Console」が出ていました。コンソールにてGoogle Maps Directions APIを有効にしましたが、まだ結果は変わりません。有効にした後になにか必要なのでしょうか？

退会済みユーザー

2016/11/08 10:27

キャッシュの削除をしたところしっかりと反映されました。目的のレスポンスも返ってきています。ありがとうございました。