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

GoogleMapsApi
2024.07.15

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

参考：
ルートサービス（Directions Service）

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; /* パディングとボーダーを含む幅と高さを計算 */
}
</style>
</head> 
<body>
  <div id="panel"></div>
  <div id="map"></div>

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

5行目：Google Maps JavaScript APIを読み込みます。YOUR_API_KEYにはご自分の取得したAPIキーを入力します。
6行目～28行目：地図のスタイルを設定します。
30行目～35行目：地図を表示するための<div>とJavaScriptファイルのリンクを含みます。

JavaScriptファイルの作成

同じディレクトリにscript.jsファイルを作成します。
今回は名古屋駅から名古屋城までのルート検索をし、結果をマップの右側に表示します。

■script.js

function initMap() {
  var nagoyaStation = {lat: 35.170915, lng: 136.881537}; //　名古屋駅
  var nagoyaCastle = {lat: 35.185158, lng: 136.899885};  //　名古屋城

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

  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  directionsRenderer.setMap(map);
  directionsRenderer.setPanel(document.getElementById('panel'));
  var request = {
    origin: nagoyaStation,
    destination: nagoyaCastle,
    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('panel').innerHTML += '<b>所要時間:</b> ' + leg.duration.text;
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

window.onload = initMap;

5行目：新しい地図オブジェクトを作成します。
10行目：ルート検索サービスを提供するオブジェクトです。
11行目：ルートを地図上に描画するオブジェクトです。
14行目～18行目ト：ルート検索のためのリクエストパラメータを設定します。
出発地（origin）、目的地（destination）、移動手段（travelMode）を指定します。
20行目：ルート検索を実行します。検索結果とステータスをコールバック関数で受け取ります。
21行目：レスポンスに有効な DirectionsResult が格納されている場合のstatusは ’OK’ です。
22行目：検索結果を地図上に描画します。

DirectionsServiceのリクエストパラメータ

DirectionsServiceの主なリクエストパラメータです。

パラメータ 設定値 説明
origin ルート検索の出発地を指定
(必須)		 String（「シカゴ、イリノイ」など）や LatLng 値、Place オブジェクトとして指定
destination ルート検索の目的地を指定
(必須)		 String（「シカゴ、イリノイ」など）や LatLng 値、Place オブジェクトとして指定
travelMode 移動手段を指定
(必須)		 「移動手段の種類」参照
transitOptions travelMode が TRANSIT の場合のみに適用される値を指定 「交通機関のオプション」参照

移動手段（travelMode）の種類

現在（2024.7時点）サポートされている移動手段です。

設定値 説明
DRIVING (デフォルト) 道路網を利用した標準の運転ルート
BICYCLING 自転車専用道路と優先道路を使った自転車ルート
TRANSIT 公共交通機関を使用するルート
WALKING 歩行者専用道路と歩道を通る徒歩経路

交通機関（TRANSIT）のオプション

交通機関（TRANSIT）のオプションです。何れのオプションも省略可能です。

オプション 説明
arrivalTime 希望する到着時刻を Date オブジェクトとして指定。到着時刻が指定されている場合、出発時刻は無視されます。
departureTime 希望する出発時刻を Date オブジェクトとして指定。arrivalTime が指定されている場合、departureTime は無視されます。departureTime と arrivalTime の両方に値が指定されていない場合は、デフォルト値として現在時刻が使用されます。
modes[] 1 つ以上の TransitMode オブジェクト リテラルを含む配列。
TransitModeには以下が指定可能です。
・BUS(バス)
・RAIL(電車、市街電車、路面電車、地下鉄)
・SUBWAY(地下鉄)
・TRAIN(電車)
・TRAM(市街電車、路面電車)
routingPreference 公共交通機関を使ったルートを検索する際の条件を指定。以下が指定可能です。
・FEWER_TRANSFERS(乗り換え回数に制限を付ける)
・LESS_WALKING(歩行距離に制限を付ける)

実行と確認

ファイルの設定が完了したら、ブラウザでHTMLファイルを開いて地図とルートが正しく表示されることを確認します。

ルート検索

応用編：パラメータの追加（経由地）

Google Maps Directions APIは、さらに多くのパラメータをサポートしています。以下は、いくつかの代表的なパラメータです。

オプション 説明
waypoints 経由地を指定
optimizeWaypoints より効率的な順序に地点を並べ替えて、経由地を最適化する
avoid 高速道路や有料道路を避ける設定

以下は、経由地（waypoints）を追加したリクエストの例です。
※HTMLファイルは同じファイルを使用します。

■script.js

function initMap() {
  var nagoyaStation = {lat: 35.170915, lng: 136.881537};
  var nagoyaCastle = {lat: 35.185158, lng: 136.899885};
  var nagoyaMuseum = {lat: 35.161438, lng: 136.900288}; // 名古屋市美術館
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: nagoyaStation // マップの中心を名古屋駅に設定
  });

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

  var request = {
    origin: nagoyaStation,
    destination: nagoyaCastle,
    waypoints: [
      {
        location: nagoyaMuseum,
        stopover: true
      }
    ],
    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('panel').innerHTML += '<b>所要時間:</b> ' + leg.duration.text;
  } else {
    window.alert('Directions request failed due to ' + status);
  }
});
}
window.onload = initMap;

4行目：名古屋市美術館の緯度経度を追加しました。

var nagoyaMuseum = {lat: 35.161438, lng: 136.900288}; // 名古屋市美術館

18行目～23行目：requestオブジェクトにwaypointsオプションを追加しました。

waypoints: [
  {
    location: nagoyaMuseum,
    stopover: true
  }
],

※stopover は地点がルート上の停止地点であることを示すブール値で、ルートを 2 つに分割する機能があります。

実行と確認

ファイルの設定が完了したら、ブラウザでHTMLファイルを開いて経由地を含めたルートが正しく表示されることを確認します。

ルート検索

まとめ

今回はGoogle Maps APIのDirectionsServiceを使用したルート検索の基本的な使い方を説明しました。ぜひ参考にしてみてください。

 

 

タイトルとURLをコピーしました