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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

Q&A

解決済

1回答

2546閲覧

gmap4rails(Google Maps Api)で2点間の時間と距離を表示させたい

s_diff

総合スコア107

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

0グッド

1クリップ

投稿2018/08/07 09:31

gmap4railsを使って二点間の距離と時間を取得して表示させたいです。

ruby

1#コントローラ 2 3 def show 4 @requests = @request.building.requests.where.not(id: @request.id, deleted_flg: true) 5 @hash = Gmaps4rails.build_markers(@request) do |request, marker| 6 marker.lat request.latitude 7 marker.lng request.longitude 8 marker.infowindow render_to_string(partial: "layouts/infowindow", locals: { request: request }) 9 end 10 end 11

ruby

1#ビュー 2 3<dl class="row"> 4 <dt class="label">住所</dt> 5 <dd class="data"><%= @request.address %></dd> 6 <a href="javascript:;" onclick="window.open('http://maps.google.co.jp/maps?q='+encodeURI());return false;">Googleマップを開く</a> 7 <% if @hash.present? %> 8 <div id="map" class="request-map"></div> 9 <script type="text/javascript"> 10 handler = Gmaps.build('Google'); 11 handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){ 12 markers = handler.addMarkers(<%=raw @hash.to_json %>); 13 handler.bounds.extendWith(markers); 14 handler.fitMapToBounds(); 15 handler.getMap().setZoom(14); 16 }); 17 var directionsDisplay = new google.maps.DirectionsRenderer(); 18 var directionsService = new google.maps.DirectionsService(); 19 20 function calcRoute() { 21 var origin = new google.maps.LatLng(33.592865, 130.395141); 22 var destination = new google.maps.LatLng(<%= @request.latitude %>, <%= @request.longitude %>); 23 24 var request = { 25 origin: origin, 26 destination: destination, 27 travelMode: google.maps.TravelMode.TRANSIT 28 }; 29 directionsService.route(request, function(response, status) { 30 if (status == google.maps.DirectionsStatus.OK) { 31 directionsDisplay.setDirections(response); 32 } 33 }); 34 } 35 calcRoute(); // call this anywhere you want 36 directionsDisplay.setMap(handler.getMap()); 37 </script> 38 <% end %> 39 </dl>

このコードでとりあえず二点間のルートを表示することができています。
しかしこのあと、時間と距離を取得して表示する方法がわかりません。
どのように取得し、表示すれば良いのでしょうか?
ご教示の方、何卒よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

[Rails]Google Maps APIでリストに追加した複数地点のルートを検索する https://qiita.com/yoshi_01/items/d3848e4e7c854fe585bd によれば、

javascript

1directionsService.route(request, function(response, status) { 2 if (status == google.maps.DirectionsStatus.OK) { 3 directionsDisplay.setDirections(response); 4 5 //距離、時間を表示する 6 var data = response.routes[0].legs; 7 for (var i = 0; i < data.length; i++) { 8 console.log(data[i].distance.text); // 距離をconsoleに出力 9 console.log(data[i].duration.text); // 時間をconsoleに出力 10 11 } 12 } 13});

のようにすると取得できるようです。表示方法については、JSでうまいこと頑張ってみてください。

もう少し詳しく説明すると、

  • directionsService.route()で得られるresponseはDirectionsResultオブジェクトで、
  • DirectionsResult.routesはDirectionsRouteの配列になっていて、
  • DirectionsRoute.legsがDirectionsLegの配列になっていて、
  • DirectionsLeg.distanceで距離が、DirectionsLeg.durationで時間が得られる、

というしくみのようです。

詳細はhttps://developers.google.com/maps/documentation/javascript/directions?hl=jaをどうぞ。

投稿2018/08/07 14:42

takahashim

総合スコア1877

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

s_diff

2018/08/10 07:26

ご回答ありがとうございます。 おっしゃる通りにコードを書き直してjqueryで実装すると上手くいきました。 大変助かりました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問