【Google Maps API】DirectionsServiceを使ってルート検索する方法②

Google Maps APIは、地図や地理情報サービスをウェブアプリケーションに統合するための強力なツールです。特に、ルート検索機能は多くの場面で役立ちます。
前回の記事では、出発地と目的地は固定で指定して、ルート検索を行いました。
この記事では、Google Maps APIのDirectionsServiceを使用して、出発地と目的地を入力して、ルート検索を行う方法を初心者向けにわかりやすく説明します。

前回の記事：
【Google Maps API】DirectionsServiceを使ってルート検索する方法①

HTMLファイルの作成
JavaScriptファイルの作成
実行と確認
まとめ

HTMLファイルの作成

任意のエディタでHTMLファイルを作成します。

■sample.html

<!DOCTYPE html>
<html>
<head>
  <title>ルート検索</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  <style>
    #map {
      height: 100%;
      width: 75%; /* 幅を75%に設定 */
      float: left; /* 左側に配置 */
    }
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #panel {
      height: 100%;
      width: 25%; /* 幅を25%に設定 */
      float: right; /* 右側に配置 */
      background-color: #fff;
      padding: 10px;
      border: 1px solid #999;
      text-align: left;
      line-height: 30px;
      box-sizing: border-box; /* パディングとボーダーを含む幅と高さを計算 */
    }
    #route-info {
      margin-top: 20px;
    }
  </style>
</head> 
<body>
  <div id="panel">
    <b>出発地: </b>
    <input id="出発地" type="text"><br>
    <b>目的地: </b>
    <input id="目的地" type="text"><br>
    <button onclick="calculateAndDisplayRoute()">ルート検索</button><br>
    </div>
  <div id="map"></div>

  <script src="script.js"></script> 
</body> 
</html>

5行目：Google Maps JavaScript APIを読み込みます。YOUR_API_KEYにはご自分の取得したAPIキーを入力します。
6行目～30行目：地図のスタイルを設定します。
35行目～38行目：出発地、目的地を入力する入力欄を設定します。
39行目：ルート検索ボタンを設定します。出発地、目的地を入力後、このボタンをクリックすると、ルート検索を行います。

JavaScriptファイルの作成

同じディレクトリにscript.jsファイルを作成します。

■script.js

let map;
let directionsService;
let directionsRenderer;
;
function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: {lat: 35.170915, lng: 136.881537} // マップの中心を名古屋駅に設定
  });

  directionsService = new google.maps.DirectionsService();
  directionsRenderer = new google.maps.DirectionsRenderer();
  directionsRenderer.setMap(map);
  directionsRenderer.setPanel(document.getElementById('panel'));
}

function calculateAndDisplayRoute() {
  const start = document.getElementById('出発地').value;
  const end = document.getElementById('目的地').value;

  var request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  };

  directionsService.route(request, function(result, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(result);
      var route = result.routes[0];
      var leg = route.legs[0];
      document.getElementById('route-info').innerHTML += '<b>所要時間:</b> ' + leg.duration.text;
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

window.onload = initMap;

19行目：入力した出発地の値を変数を設定しています。
20行目：入力した目的地の値を変数を設定しています。