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

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

今回は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の部分のみ表示

function initMap() {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var origin_address;
  var destination_address;

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 36.578057, lng: 136.64866}
  });
  directionsDisplay.setMap(map);

  document.getElementById('go_btn').addEventListener('click', function() {
      origin_address = document.getElementById('origin_address').value;
      estination_address = document.getElementById('destination_address').value;
      
      calculateAndDisplayRoute(map, directionsService, directionsDisplay, origin_address, estination_address);
  });
}

//set Directions
function calculateAndDisplayRoute(map, directionsService, directionsDisplay, origin_address, destination_address) {
    var marker;

    directionsService.route({
        origin: origin_address,
        destination: destination_address,
        travelMode: google.maps.DirectionsTravelMode.WALKING
    },function(response, status) {
        if (status === google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);

            marker = setMarker(map, new google.maps.LatLng(response.routes[0].bounds.f.b, response.routes[0].bounds.b.f));

            movemarker(marker, 0, response.routes[0].overview_path.length, response.routes[0].overview_path);
        }else {
            window.alert('Directions request failed due to ' + status);
        }
    });

    document.getElementById('clr_btn').addEventListener('click', function() {
        marker.setMap(null);
    });
}

//set Marker
function setMarker(map, locate){
    return new google.maps.Marker({
        position:locate,
        map:map,
        title:'my'
    });
}

//moveing marker　再帰処理
function movemarker(marker, step, fin_steps, locates){
    marker.setPosition(new google.maps.LatLng(locates[step].lat(), locates[step].lng()));

    if(step <= fin_steps){
        setTimeout(function(){
            movemarker(marker, step + 1, fin_steps, locates);
            },25);
        }
}

動作しているところ　ここ

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

余談
参考文献
- 関連

余談

},function(response, status) {
        if (status === google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
           //ココらへんの事を言っている
        }

にて(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;