GoogleMapsApiで２点間のルートと所要時間を表示

前提条件

・APIキーは取得済み
→未取得の場合はこの辺りの記事を参考にAPIキーを取得してください。

実装

HTMLの実装

html

<div><p id="route-time"></p></div>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

HTMLの実装はシンプルです。

1行目は所要時間を表示する領域です。

2行目はGooleMapを表示する領域となります。
divタグにid="map"を指定しておき、Javascript側で地図を描画するようにします。

3行目でAPIキーの読み込みを行います。
YOUR_API_KEYの部分を取得したAPIキーで書き換えてください。

Javascriptの実装

js

var directionsService;
var directionsRenderer;
var distanceMatrixservice;
var map;

function initMap() {
        // GoogleMapsAPI実体化
        directionsService = new google.maps.DirectionsService();
        directionsRenderer = new google.maps.DirectionsRenderer();
        distanceMatrixservice = new google.maps.DistanceMatrixService();

        // Map初期表示設定
        map = new google.maps.Map(document.getElementById("map"), {
          zoom: 16, // 地図のズームレベル設定
          center: { lat: 35.6812405, lng: 139.7649361 }, // 地図表示の中心座標
        });

        // 地図描画
        directionsRenderer.setMap(map);

        // オプション設定
        // 地図の座標指定、ズームレベルの設定を適用する
        directionsRenderer.setOptions({
          preserveViewport: true,
        });

        // ルート取得
        setLocation("35.6812405", "139.7649361");
}

function setLocation(lat, lng){
         // 所要時間取得
		 distanceMatrixservice.getDistanceMatrix({
		  origins: [lat +"," + lng], // 出発地
		  destinations: ["35.676251" + "," + "139.779885"], // 目的地
		  travelMode: google.maps.TravelMode.DRIVING, // 移動手段
	    }, timeRequired)
	    
        // ルート取得
        directionsService
        .route({
          origin: lat +"," + lng, // 出発地
          destination: "35.676251" + "," + "139.779885", // 目的地
          travelMode: google.maps.TravelMode.DRIVING, // 移動手段
        })
        .then((response) => {
          directionsRenderer.setDirections(response);
	        map.panTo(new google.maps.LatLng(lat,lng));
        })
        .catch((e) => window.alert("Directions request failed due to " + status));
}

function timeRequired(response, status) {
	    if(status == "OK") {
		  var origins = response.originAddresses;
          var destinations = response.destinationAddresses;

              for (var i = 0; i < origins.length; i++) {
                var results = response.rows[i].elements;
                for (var j = 0; j < results.length; j++) {
                  var element = results[j];
                  var distance = element.distance.text;
                  var duration = element.duration.text;
                  var from = origins[i];
                  var to = destinations[j];
               }
             }
          var routeTime = document.getElementById("route-time");
          routeTime.innerHTML = "およそ" + duration + "で着きます"
	    }
}

ざっくり説明していきます。

• initMap()
  　APIの実体化、地図の初期設定、描画を行います。
  　DirectionsRendererオブジェクトでレンダリングをしています。
• setLocation()
  　出発地、目的地を設定し、ルートの取得を行います。
  　ルート設定と取得はDirectionsServiceオブジェクトで行います。
  　また所要時間取得の設定と、実際に所要時間を取得するtimeRequired関数を呼び出します。
• timeRequired()
  　所要時間の取得を行います。
  　所要時間の取得はDistanceMatrixServiceオブジェクトで行います。

サンプル

東京駅～弊社までを、車での移動を想定した所要時間とルート表示するとこうなります。