Google Mapでスタート地点からゴール地点の道のりを表示した後、マーカーで辿る

Google Maps Streetview Playerというサイトがあり、スタート地点とゴール地点を入れると2点間のストリートビューを再生するサイトにて、「どうやって2点間の道のりをマーカーで動かしているのだろうか」という不思議な技術に興味を持ち、色々考えたらできたので残しておきます。

今回はPythonでなく、Java Scriptです。(たまには違う言語でプログラムしたいときがある。)

Google Maps APIを使うには、Google様からAPIキーを貰う必要があるので、もらってくること!

Google Developer:http://console.developers.google.com/apis/library?hl=ja&project=smart-surf-146714

Goolge Maps APIの”google.maps.DirectionsService”というのが二点間の距離の情報をあれこれ持ってこれる。

詳細:http://developers.google.com/maps/documentation/javascript/directions?hl=ja

Google Maps APIのサンプルコードをちょこちょこいじって完成

コードが長いためJavaScriptの部分のみ表示

動作しているところ ここ

一応GitHubにもアップロード ここ

スポンサーリンク




スポンサーリンク

余談

にて(29行目)、

var hoge = response.routes[0];

とするとhogeに道のりに関する情報が色々取得することができる。

例:

総距離
var distance = response.routes[0].legs[0].distance.text;

総時間
var duration = response.routes[0].legs[0].duration.text;

参考文献

  1. http://www.openspc2.org/reibun/Google/Maps/API/ver3/code/map/marker/6000/
  2. http://developers.google.com/maps/documentation/javascript/examples/?hl=ja
  3. http://stackoverflow.com/questions/2472482/directions-distance-in-google-maps-api-v3
  4. http://okwave.jp/qa/q8790394.html
  5. http://www.ideaxidea.com/archives/2015/07/google_street_maps_player.html