【jQuery】各地点から各地点まで車で何分かかるか（移動時間の予測）の結果だけを抽出したい

いつもお世話になっております。

###前提・実現したいこと
表題の通り、各地点から各地点まで車で何分かかるか（移動時間の予測）の結果だけを抽出したいと思い、下記コードにて実装を行いました。

実装結果が下記のスクショのようになります。

やりたいこととしては、
下記コードで実装した際に、赤文字になっている「約９分」の部分のみを取得したいです。

###発生している問題・エラーメッセージ

javascript
1($('.adp-summary span:nth-child(3)')).text();

上記で約9分の文字だけ取得できると思ったのですが、
コンソールを叩くと空白になってしまいました。

ここがコンソールを叩いたり変数に入れた際に「約9分」と表示されるようにしたいです。

###該当のソースコード

javascript
1//googlemap 生成用
2function sample1() {
3    //ルート検索結果を表示するオブジェクト
4    var directionsRenderer = new google.maps.DirectionsRenderer;
5    //ルートを検索するオブジェクト
6    var directionsService = new google.maps.DirectionsService;
7    //位置座標のインスタンスを作成する
8    var latlng = new google.maps.LatLng();
9    var opts = {
10        //地図の縮尺
11        zoom: 15,
12        //地図の中心座標
13        center: latlng,
14        //地図の種類
15        mapTypeId: google.maps.MapTypeId.ROADMAP,
16    };
17    //マップの表示
18    var map = new google.maps.Map(document.getElementById("map_canvas1"), opts);
19    //ルートのテキスト表示設定
20    directionsRenderer.setPanel(document.getElementById('panel'));
21    //ルートのマップ(ウェイポイントの線及びピン)を表示
22    directionsRenderer.setMap(map);
23    /* ルートを予測 */
24    var start = "小倉駅";
25    var end = "西小倉駅";
26    var request = {
27        //出発地点
28        origin: start,
29        //到着地点
30        destination: end,
31        //トラベルモード
32        travelMode: google.maps.TravelMode.DRIVING,
33        //オプションの設定
34        drivingOptions: {
35            departureTime: new Date(),
36            trafficModel: google.maps.TrafficModel.BEST_GUESS
37        },
38    };
39    directionsService.route(request, function(response, status) {
40        if (status == google.maps.DirectionsStatus.OK) {
41            //ルートの表示
42            directionsRenderer.setDirections(response);
43        }
44    });
45}
46window.onload = sample1;

html
1<head>
2<style>
3.adp-summary span:nth-child(3){
4  color:red;
5}
6</style>
7</head>
8
9<body>
10
11<div class="hoge">
12 <span>11分</span>
13</div>
14
15<div id="panel" style="float:left; width:300px"></div>
16<div id="map_canvas1" style="width:300px; height:300px"><div>
17</body>

javascript
1//「約９分」を取り出そうと試したコード
2<script>
3$(function(){
4    $("span:contains('分')").css("text-decoration", "underline");
5    var n2 = ($('.adp-summary span:nth-child(3)')).html();            
6    console.log(n2);
7});
8         
9</script>

###試したこと

css
1.adp-summary span:nth-child(3){
2  color:red;
3}

が効いていることの確認、

javascript
1$("span:contains('分')").css("text-decoration", "underline");

で分が含まれるspanにアンダーラインを引いてみたりと色々試したのですが
テストで打った

<div class="hoge"> <span>11分</span> </div> には線がついたものの、肝心の取りたい「9分」の部分は線がつきませんでした。。

googlemap 生成用のjsは、
http://www.vintage.ne.jp/blog/2016/01/780
などを参考にいたしました。

googlemapを使用していれば実装方法にこだわりがなく、
とにかくgooglemapの移動時間の予測結果だけを抽出したいです。

自分ではなぜ空白になるのかわかりませんでした。

ご教授頂けますと幸いです。

行動規範の内容に同意します

回答2件

ベストアンサー

directionsRenderer.setDirections(response); の response を console.log(); で出力してみてください。生データとして取得できると思います。（ arrival_time が予測時間）

【Google Maps JavaScript API V3 Reference | Google Maps JavaScript API | Google Developers】
https://developers.google.com/maps/documentation/javascript/reference#DirectionsLeg

【Directions Service | Google Maps JavaScript API | Google Developers】
https://developers.google.com/maps/documentation/javascript/directions?hl=ja#Legs

投稿2017/02/13 02:46

kei344

総合スコア69407

miyoshi_work

2017/02/13 04:12

ご回答ありがとうございます！下記で試してみたのですが、 ``` directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { //ルートの表示 directionsRenderer.setDirections(response); var obj = directionsRenderer.setDirections(response); console.log(response); console.log(obj); } }); ``` console.log(response); ではコンソールでオブジェクトが表示されたのですが予測時間が見つかりませんでした。。。出力方法はこちらであっていますでしょうか？また、書き方を変えて ``` var obj = directionsRenderer.setDirections(response); console.log(obj); ``` としてみたのですがundefinedとなってしまいました… やり方に問題があると思うのですが何故でしょうか？質問ばかりで恐縮ですが何卒宜しくお願いします。。。

kei344

2017/02/13 04:37

> オブジェクトが表示されたのですがオブジェクトは中身を確認できるはずなので、クリックして中身を見てください。

miyoshi_work

2017/02/13 04:58

ありがとうございました、自分の確認不足でした… 大変助かりました、ありがとうございます！

行動規範の内容に同意します

console.log(response["routes"][0]["legs"]);

辺りに9分がありました約9分ではなく9分でしたが

投稿2017/02/13 04:39

date

総合スコア1820

miyoshi_work

2017/02/13 04:58

ありがとうございます、ちょうど自分も見つけれたところでした助かりました！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

【jQuery】各地点から各地点まで車で何分かかるか（移動時間の予測）の結果だけを抽出したい

関連した質問