ルートサービス

概要

（各種の移動手段を使用する）ルートは、DirectionsService オブジェクトを使用して計算できます。このオブジェクトは Google Maps API のルートサービスと通信を行い、ルートサービスはルート リクエストを受信して効率的な経路を返します。最適化で最も重視されるのは移動時間ですが、距離や進路変更の回数なども考慮される場合があります。これらのルート結果は、ユーザー自身で処理することも、DirectionsRenderer オブジェクトを使用してレンダリングすることもできます。

ルート リクエストでは、クエリ文字列（「シカゴ、イリノイ」、「ダーウィン、NSW、オーストラリア」など）や LatLng の値、Place オブジェクトを使って出発地や目的地を指定します。

ルートサービスは一連の地点を使用して、複数の要素で構成されるルートを返すことができます。ルートは地図上にポリラインとして描画されます。<div> 要素内にある一連のテキスト（「ウィリアムズバーグ橋のランプを右折」など）も追加で表示されることがあります。

スタートガイド

Maps JavaScript API でルートサービスを使用するにはまず、Maps JavaScript API を設定したプロジェクトで Directions API（従来版）が有効になっていることを Google Cloud コンソールで確認します。

有効な API のリストを表示するには:

1. Google Cloud コンソールに移動します。
2. [プロジェクトを選択] ボタンをクリックし、Maps JavaScript API を設定したプロジェクトを選択して、[開く] をクリックします。
3. [ダッシュボード] の API のリストから、Directions API（従来版） を探します。
4. リストに API が表示されていれば、準備は完了です。API がリストにない場合は、https://console.cloud.google.com/apis/library/directions-backend.googleapis.com で有効にします。

料金とポリシー

料金

JavaScript ルートサービスの料金と使用量に関するポリシーについては、Directions API（従来版）の使用量と請求額をご覧ください。

ポリシー

Directions サービスを使用する際は、Directions API（従来版）に関するポリシーに従う必要があります。

ルート リクエスト

ルートサービスにアクセスすると、Google Maps API は外部サーバーに対して呼び出しを行うので、処理が非同期になります。このため、コールバック メソッドを渡してリクエストの完了時に実行し、このコールバック メソッドで結果を処理する必要があります。ルートサービスは、独立した routes[] の配列として複数のルートを返すことがあります。

Maps JavaScript API でルートを扱うには、タイプ DirectionsService のオブジェクトを作成し、DirectionsService.route() を呼び出してルートサービスへのリクエストを開始します。そこで入力内容を含む DirectionsRequest オブジェクト リテラルと、レスポンスの受信時に実行するコールバック メソッドを渡します。

DirectionsRequest オブジェクト リテラルには次のフィールドがあります。

{   origin: LatLng | String | google.maps.Place,   destination: LatLng | String | google.maps.Place,   travelMode: TravelMode,   transitOptions: TransitOptions,   drivingOptions: DrivingOptions,   unitSystem: UnitSystem,   waypoints[]: DirectionsWaypoint,   optimizeWaypoints: Boolean,   provideRouteAlternatives: Boolean,   avoidFerries: Boolean,   avoidHighways: Boolean,   avoidTolls: Boolean,   region: String }

以下はフィールドの説明です。

• origin（必須）は、ルートの計算を開始する位置を指定します。この値は String（「シカゴ、イリノイ」など）や LatLng 値、Place オブジェクトとして指定します。Place オブジェクトを使用する場合は、プレイス ID、クエリ文字列、または LatLng の場所を指定できます。プレイス ID は、Maps JavaScript API のジオコーディングや Place Search、Place Autocomplete サービスによって取得できます。Place Autocomplete から取得したプレイス ID の使用例については、Place Autocomplete とルートをご覧ください。
• destination（必須）は、ルートの計算を終了する位置を指定します。オプションは、上記の origin フィールドと同じです。
• travelMode（必須）は、ルートの計算に使用する移動手段を指定します。使用可能な値については、下記の移動手段をご覧ください。
• transitOptions（省略可）: travelMode が TRANSIT のリクエストだけに適用される値を指定します。使用可能な値については、後述の交通機関のオプションをご覧ください。
• drivingOptions（省略可）: travelMode が DRIVING であるリクエストだけに適用される値を指定します。使用可能な値については、後述の運転オプションをご覧ください。

• unitSystem（省略可能）は、結果を表示するときに使用する単位系を指定します。使用可能な値については、後述の単位系をご覧ください。

• waypoints[]（省略可）は DirectionsWaypoint の配列を指定します。地点とは指定された場所を経由するようにルートを変更するもので、以下のフィールドを持つオブジェクト リテラルとして指定されます。

  • location は地点の位置を、LatLng、Place オブジェクト、またはジオコーディングされる String として指定します。
  • stopover は地点がルート上の停止地点であることを示すブール値で、ルートを 2 つに分割する機能があります

  （地点の詳細については、後述のルート内で地点を使用するをご覧ください）。

• optimizeWaypoints（省略可）は、地点をより効率的な順序に並べ替えることで、指定された waypoints を使用するルートを最適化するよう指定します。true の場合、ルートサービスは、waypoint_order フィールドの並べ替えられた waypoints を返します（詳細については、後述のルートで地点を使用するをご覧ください）。
• provideRouteAlternatives（省略可能）は、true に設定した場合、ルートサービスで複数の代替ルートを返すよう指定します。代替ルートの提供は、サーバーからの応答時間が長くなることがあるので、注意してください。これは、中間地点がないリクエストに対してのみ使用できます。
• avoidFerries（省略可）は、true に設定した場合、可能であればルート内でフェリーを利用しないよう指定します。
• avoidHighways（省略可能）は、true に設定した場合、可能であれば計算されたルートで主要高速道路を除外するよう指定します。
• avoidTolls（省略可能）は、true に設定した場合、可能であれば計算されたルートで有料区間を除外するよう指定します。
• region（省略可能）は、ccTLD（「トップレベル ドメイン」）の 2 文字の値として指定される地域コードを指定します（詳細については、下記の地域のバイアスをご覧ください）。

例は次のとおりです。DirectionsRequest

{   origin: 'Chicago, IL',   destination: 'Los Angeles, CA',   waypoints: [     {       location: 'Joplin, MO',       stopover: false     },{       location: 'Oklahoma City, OK',       stopover: true     }],   provideRouteAlternatives: false,   travelMode: 'DRIVING',   drivingOptions: {     departureTime: new Date(/* now, or future date */),     trafficModel: 'pessimistic'   },   unitSystem: google.maps.UnitSystem.IMPERIAL }

移動手段

ルートを計算するときは、使用する移動手段を指定する必要があります。現在サポートされている移動手段は、次のとおりです。

• DRIVING（デフォルト）は、道路網を利用した標準の運転ルートを示します。
• BICYCLING は、自転車専用道路と優先道路を使って自転車ルートをリクエストします。
• TRANSIT は、公共交通機関を使用するルートをリクエストします。
• WALKING は、歩行者専用道路と歩道を通る徒歩経路をリクエストします。

各国でサポートされているルートの範囲については、Google Maps Platform のサポート状況をご覧ください。リクエストしたルートの種類が、その地域で利用できない場合は、応答として DirectionsStatus="ZERO_RESULTS" が返されます。

注: 徒歩経路には明確な歩道がないことがあるため、徒歩経路をリクエストすると DirectionsResult に警告が返されます。この警告は必ずユーザーに表示してください。デフォルトの DirectionsRenderer を使用しない場合は、警告がユーザーに表示されることを、ご自身の責任で確認する必要があります。

交通機関のオプション

ルート リクエストで利用できるオプションは、移動手段によって異なります。 乗換案内をリクエストする場合、avoidHighways、avoidTolls、waypoints[]、optimizeWaypoints のオプションは無視されます。交通機関固有のルート オプションは、TransitOptions オブジェクト リテラルで指定できます。

乗換案内のルートには時間的な制約があります。現在時刻より後のルートだけが返されます。

TransitOptions オブジェクト リテラルには次のフィールドがあります。

{   arrivalTime: Date,   departureTime: Date,   modes[]: TransitMode,   routingPreference: TransitRoutePreference }

以下はフィールドの説明です。

• arrivalTime（省略可）: 希望する到着時刻を Date オブジェクトとして指定します。到着時刻が指定されている場合、出発時刻は無視されます。
• departureTime（省略可）: 希望する出発時刻を Date オブジェクトとして指定します。arrivalTime が指定されている場合、departureTime は無視されます。departureTime と arrivalTime の両方に値が指定されていない場合は、デフォルト値として現在時刻が使用されます。
• modes[]（省略可）は、1 つ以上の TransitMode オブジェクト リテラルを含む配列です。このフィールドを使用できるのは、リクエストに API キーが含まれている場合のみです。各 TransitMode は、希望する移動手段を指定するフィールドで、使用できる値は以下のとおりです。
  • BUS は、バスを使ったルートを計算するよう指定します。
  • RAIL は、電車、市街電車、路面電車、地下鉄を使ったルートを計算するよう指定します。
  • SUBWAY は、地下鉄を使ったルートを計算するよう指定します。
  • TRAIN は、電車を使ったルートを計算するよう指定します。
  • TRAM は、市街電車と路面電車を使ったルートを計算するよう指定します。
• routingPreference（省略可）には、公共交通機関を使ったルートを検索する際の条件を指定します。このオプションを使うと、API がデフォルトで選択した最適ルートを受け取る代わりに、返されるオプションにバイアスをかけることができます。このフィールドを指定できるのは、リクエストに API キーが含まれている場合のみです。使用できる値は以下のとおりです。
  • FEWER_TRANSFERS は、乗り換え回数に制限を付けてルートを計算するよう指定します。
  • LESS_WALKING は、歩行距離に制限を付けてルートを計算するよう指定します。

乗換案内によるサンプルの DirectionsRequest を以下に示します。

{   origin: 'Hoboken NJ',   destination: 'Carroll Gardens, Brooklyn',   travelMode: 'TRANSIT',   transitOptions: {     departureTime: new Date(1337675679473),     modes: ['BUS'],     routingPreference: 'FEWER_TRANSFERS'   },   unitSystem: google.maps.UnitSystem.IMPERIAL }

運転オプション

DrivingOptions オブジェクトを使用して、運転ルートのルーティング オプションを指定できます。

DrivingOptions オブジェクトには次のフィールドがあります。

{   departureTime: Date,   trafficModel: TrafficModel }

以下はフィールドの説明です。

• departureTime（drivingOptions オブジェクト リテラルを有効にするために必須）は、希望する出発時刻を Date オブジェクトとして指定します。この値は現在時刻以降に設定する必要があり、過去の時刻は指定できません（API はすべての日時を UTC 時間に変換して、タイムゾーンにかかわらず一貫した処理を行います）。Google Maps Platform プレミアム プランをご利用のお客様の場合は、リクエストに departureTime を含めると、API はその時点の予想される交通状況に基づいて最適なルートを返し、レスポンスには推定所要時間（duration_in_traffic）が含まれます。出発時刻を指定しない場合（リクエストに drivingOptions が含まれていない場合）は、交通状況を考慮しない状態で概ね適切と考えられるルートが返されます。
• trafficModel（省略可）は、所要時間を計算する上での仮定条件を指定します。この設定に応じて、レスポンスで duration_in_traffic フィールドに返される値が変わります。この値は、過去の平均データに基づく予測所要時間となります。デフォルトでは bestguess に設定されます。使用できる値は以下のとおりです。
  • bestguess（デフォルト）は、過去と現在の交通状況のデータを基に見積もった最適な移動時間を、duration_in_traffic で返すよう指定します。departureTime が現在時刻に近いほど、現在の交通状況が重視されます。
  • pessimistic は、普段の実際の移動時間よりも大きい値を duration_in_traffic で返すよう指定します。ただし、交通状況が極端に悪い場合は、この値よりも長い時間を要する可能性があります。
  • optimistic は、普段の実際の移動時間よりも小さい値を duration_in_traffic で返すよう指定します。ただし、交通状況が非常に良い場合は、この値よりも短時間で到着する可能性があります。

運転ルートの DirectionsRequest のサンプルは次のとおりです。

{   origin: 'Chicago, IL',   destination: 'Los Angeles, CA',   travelMode: 'DRIVING',   drivingOptions: {     departureTime: new Date(Date.now() + N),  // for the time N milliseconds from now.     trafficModel: 'optimistic'   } }

単位系

デフォルトでは、出発地の国や地域の単位系を使用してルートの計算や表示を行います（注: 住所ではなく座標（緯度 / 経度）で表した出発地は、常にメートル法がデフォルトになります）。たとえば、「シカゴ、イリノイ」から「トロント、オンタリオ」へのルートはマイルで表示され、この逆のルートはキロメートルで表示されます。単位系のデフォルト設定は、次のいずれかの UnitSystem 値を使用してリクエスト内で明示的に設定することでオーバーライドできます。

• UnitSystem.METRIC はメートル系を使用するよう指定します。距離はキロメートルで表示されます。
• UnitSystem.IMPERIAL はヤード・ポンド法を使用するよう指定します。距離はマイルで表示されます。

注: この単位系設定は、ユーザーに表示されるテキストにのみ影響します。ルートの結果にはユーザーに表示されない距離の値も含まれますが、これは常にメートルで表現されます。

ルートの地域バイアス

Google Maps API ルートサービスは、JavaScript ブートストラップをロードしたドメイン（地域や国）に応じた住所の結果を返します（多くのユーザーは https://maps.googleapis.com/ を読み込むため、暗黙的に米国がドメインに設定されます）。サポートされている別のドメインからブートストラップをロードした場合は、そのドメインに対応した結果が得られます。たとえば、「サンフランシスコ」を検索する場合、https://maps.googleapis.com/（米国）を読み込むアプリケーションから返される結果は http://maps.google.es/（スペイン）を読み込むアプリケーションからの結果とは異なります。

また、region パラメータを使って、ルートサービスの結果で特定の地域が優先されるように設定することもできます。このパラメータには、地域コードを 2 文字（数値ではない）の Unicode 地域サブタグで指定します。このタグは多くの場合、「co.uk」の場合の「uk」など、よく使用される ccTLD（「トップレベル ドメイン」）の 2 文字の値に直接対応します。場合によって、region タグは ISO-3166-1 コードもサポートします。これは ccTLD 値とは異なることがあります（「Great Britain」の「GB」など）。

region パラメータを使用する際は以下に留意します。

• 国または地域を 1 つだけ指定します。複数の値は無視され、リクエストが失敗する原因となります。
• 2 文字の地域サブタグ（Unicode CLDR 形式）だけを使用します。他の形式での入力はエラーになります。

地域バイアスがサポートされるのは、ルートをサポートしている国 / 地域のみです。各国における Directions API（従来版）のサポート状況については、Google Maps Platform のサポート状況をご覧ください。

ルートのレンダリング

DirectionsService へのルート リクエストを route() メソッドで開始する場合、サービス リクエストの完了時に実行されるコールバックを渡す必要があります。このコールバックは DirectionsResult と DirectionsStatus コードをレスポンスで返します。

ルートクエリのステータス

DirectionsStatus によって次の値が返されることがあります。

• OK は、レスポンスに有効な DirectionsResult が格納されていることを示します。
• NOT_FOUND は、リクエストの出発地、目的地、地点で指定された場所のうち、少なくとも 1 つをジオコーディングできなかったことを示します。
• ZERO_RESULTS は、出発地と目的地の間にルートが見つからなかったことを示します。
• MAX_WAYPOINTS_EXCEEDED は、DirectionsRequest で指定された DirectionsWaypoint フィールドが多すぎることを示します。地点の制限に関する後述のセクションをご覧ください。
• MAX_ROUTE_LENGTH_EXCEEDED は、リクエストされたルートが長すぎるため処理できないことを示します。このエラーは、より複雑なルートが返された場合に発生します。地点、右左折、指示の数を減らしてください。
• INVALID_REQUEST は指定された DirectionsRequest が無効であることを示します。このエラーの一般的な原因としては、リクエストで出発地か目的地を指定していない、または交通機関を使うリクエストで地点を指定していることが考えられます。
• OVER_QUERY_LIMITは、許可された期間内でウェブページから送信されたリクエストが多すぎることを示します。
• REQUEST_DENIEDは、ウェブページでルートサービスが使用できないことを示します。
• UNKNOWN_ERRORは、サーバーエラーが原因でルート リクエストを処理できなかったことを示します。再度リクエストすると、成功する可能性があります。

結果を処理する前に、これらの値を確認して、ルートクエリが有効な結果を返したことを確かめるようにしてください。

DirectionsResult の表示

DirectionsResult はルートクエリの結果を格納しており、ユーザー自身が処理することも、DirectionsRenderer オブジェクトに渡して地図上への結果の表示を自動的に処理することもできます。

DirectionsRenderer を使用して DirectionsResult を表示するには、次の操作を行う必要があります。

1. DirectionsRenderer オブジェクトを作成します。
2. レンダラで setMap() を呼び出して、渡された地図にバインドします。
3. レンダラで setDirections() を呼び出して、上記で説明したように DirectionsResult に渡します。レンダラは MVCObject であるため、プロパティへの変更がある場合は自動的に検出し、関連付けられたルートが変更されると地図を更新します。

次の例では、ルート 66 上の 2 つの地点間のルートを計算します。出発地点と目的地点はプルダウン リストで指定された "start" 値と "end" 値で設定されています。DirectionsRenderer は指定された地点間のポリラインの表示と、出発地点と目的地点、存在する場合は地点へのマーカーの配置を処理します。

function initMap() {   var directionsService = new google.maps.DirectionsService();   var directionsRenderer = new google.maps.DirectionsRenderer();   var chicago = new google.maps.LatLng(41.850033, -87.6500523);   var mapOptions = {     zoom:7,     center: chicago   }   var map = new google.maps.Map(document.getElementById('map'), mapOptions);   directionsRenderer.setMap(map); }  function calcRoute() {   var start = document.getElementById('start').value;   var end = document.getElementById('end').value;   var request = {     origin: start,     destination: end,     travelMode: 'DRIVING'   };   directionsService.route(request, function(result, status) {     if (status == 'OK') {       directionsRenderer.setDirections(result);     }   }); }

以下は HTML の本文です。

<div> <strong>Start: </strong> <select id="start" onchange="calcRoute();">   <option value="chicago, il">Chicago</option>   <option value="st louis, mo">St Louis</option>   <option value="joplin, mo">Joplin, MO</option>   <option value="oklahoma city, ok">Oklahoma City</option>   <option value="amarillo, tx">Amarillo</option>   <option value="gallup, nm">Gallup, NM</option>   <option value="flagstaff, az">Flagstaff, AZ</option>   <option value="winona, az">Winona</option>   <option value="kingman, az">Kingman</option>   <option value="barstow, ca">Barstow</option>   <option value="san bernardino, ca">San Bernardino</option>   <option value="los angeles, ca">Los Angeles</option> </select> <strong>End: </strong> <select id="end" onchange="calcRoute();">   <option value="chicago, il">Chicago</option>   <option value="st louis, mo">St Louis</option>   <option value="joplin, mo">Joplin, MO</option>   <option value="oklahoma city, ok">Oklahoma City</option>   <option value="amarillo, tx">Amarillo</option>   <option value="gallup, nm">Gallup, NM</option>   <option value="flagstaff, az">Flagstaff, AZ</option>   <option value="winona, az">Winona</option>   <option value="kingman, az">Kingman</option>   <option value="barstow, ca">Barstow</option>   <option value="san bernardino, ca">San Bernardino</option>   <option value="los angeles, ca">Los Angeles</option> </select> </div>

サンプルを表示

次の例は、カリフォルニア州サンフランシスコのハイトアシュベリーとオーシャンビーチ間の各移動手段によるルートを表示します。

function initMap() {   var directionsService = new google.maps.DirectionsService();   var directionsRenderer = new google.maps.DirectionsRenderer();   var haight = new google.maps.LatLng(37.7699298, -122.4469157);   var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);   var mapOptions = {     zoom: 14,     center: haight   }   var map = new google.maps.Map(document.getElementById('map'), mapOptions);   directionsRenderer.setMap(map); }  function calcRoute() {   var selectedMode = document.getElementById('mode').value;   var request = {       origin: haight,       destination: oceanBeach,       // Note that JavaScript allows us to access the constant       // using square brackets and a string value as its       // "property."       travelMode: google.maps.TravelMode[selectedMode]   };   directionsService.route(request, function(response, status) {     if (status == 'OK') {       directionsRenderer.setDirections(response);     }   }); }

以下は HTML の本文です。

<div> <strong>Mode of Travel: </strong> <select id="mode" onchange="calcRoute();">   <option value="DRIVING">Driving</option>   <option value="WALKING">Walking</option>   <option value="BICYCLING">Bicycling</option>   <option value="TRANSIT">Transit</option> </select> </div>

サンプルを表示

DirectionsRenderer はポリラインと関連付けられたマーカーの表示を処理し、一連のステップとしてルートのテキスト表示も処理します。そのためには、DirectionsRenderer で setPanel() を呼び出して、この情報を表示する <div> を渡します。こうすると、適切な著作権情報と結果に関連する警告も必ず表示されます。

テキストによるルートは、ブラウザの優先言語設定、または API JavaScript を language パラメータを使用して読み込んだときに指定された言語を使用して提供されます（詳細については、ローカライズをご覧ください）。交通機関のルートにおける時刻は、該当する駅や停留所のタイムゾーンで表示されます。

次の例は、ルートを表示する <div> パネルがあることを除いて、上記の例と同じです。

function initMap() {   var directionsService = new google.maps.DirectionsService();   var directionsRenderer = new google.maps.DirectionsRenderer();   var chicago = new google.maps.LatLng(41.850033, -87.6500523);   var mapOptions = {     zoom:7,     center: chicago   }   var map = new google.maps.Map(document.getElementById('map'), mapOptions);   directionsRenderer.setMap(map);   directionsRenderer.setPanel(document.getElementById('directionsPanel')); }  function calcRoute() {   var start = document.getElementById('start').value;   var end = document.getElementById('end').value;   var request = {     origin:start,     destination:end,     travelMode: 'DRIVING'   };   directionsService.route(request, function(response, status) {     if (status == 'OK') {       directionsRenderer.setDirections(response);     }   }); }

以下は HTML の本文です。

<div id="map" style="float:left;width:70%;height:100%"></div> <div id="directionsPanel" style="float:right;width:30%;height:100%"></div>

サンプルを表示

DirectionsResults オブジェクト

ルート リクエストを DirectionsService に送信すると、ステータス コードと DirectionsResult オブジェクトの結果からなるレスポンスを受け取ります。DirectionsResult は、次のフィールドを含むオブジェクト リテラルです。

• geocoded_waypoints[] には DirectionsGeocodedWaypoint オブジェクトの配列が入っていて、各オブジェクトには出発地、目的地、地点のジオコーディングの詳細情報が含まれています。
• routes[] には DirectionsRoute オブジェクトの配列が格納されています。各ルートは、DirectionsRequest で指定された出発地から目的地に至る経路を示します。一般に、リクエストの provideRouteAlternatives フィールドが true に設定されている場合（このとき複数のルートが返されます）を除き、リクエストに対して返されるルートは 1 つだけです。

注: 代替ルートの via_waypoint プロパティは非推奨になりました。代替ルートの地点経由で他のルートを追加する API の最終バージョンは、3.27 です。バージョン 3.28 以降の API では、代替ルートのドラッグを無効にすることで、引き続きルートサービスを使用してドラッグ可能なルートを実装できます。ドラッグ可能にするのはメインルートのみにしてください。メインルートは、代替ルートと一致するまでドラッグできます。

ルート案内: ジオコーディングされた経由地点（DirectionsGeocodedWaypoint）

DirectionsGeocodedWaypoint には、出発地、目的地、地点のジオコーディングの詳細情報が含まれます。

DirectionsGeocodedWaypoint は、次のフィールドを含むオブジェクト リテラルです。

• geocoder_status は、ジオコーディングの処理結果を示すステータス コードです。このフィールドには次の値が含まれます。
  • "OK" は、エラーが発生せず、住所が正常に解析され、少なくとも 1 件のジオコードが返されたことを示します。
  • "ZERO_RESULTS" は、ジオコードは成功したものの結果が返されなかったことを示します。これは、実在しない address がジオコーダに渡された場合に発生することがあります。

• partial_match は、ジオコーダによって、元のリクエストに完全一致する住所は見つからなかったものの、部分一致する住所は見つかったことを示します。元のリクエストで住所の表記が間違っていたり、不完全である可能性があります。

  多くの場合、リクエストで渡された地域に番地が存在しないために部分一致が発生します。また、同じ地域内に複数の場所があるリクエストを行った場合も部分一致が返されます。たとえば、「Hillpar St, Bristol, UK」の場合は、Henry Street と Henrietta Street の両方の部分一致が返されます。リクエストに表記が間違った住所コンポーネントが含まれている場合、ジオコーディング サービスが別の住所を提示することもある点に注意してください。この場合も、部分一致として結果が返されます。

• place_id は他の Google API と一緒に使用できるプレイス固有の識別子です。たとえば、place_id を Google Places API ライブラリと併用すると、電話番号や営業時間、ユーザーのレビューなど、ローカル ビジネスの詳細情報を取得できます。プレイス ID の概要をご覧ください。
• types[] は、返された結果の「タイプ」を示す配列です。この配列には、結果として返された対象物のタイプを表す 0 個以上のタグのセットが含まれています。たとえば、「Chicago」のジオコードは「Chicago」が市であることを示す「locality」と、行政上の存在であることを示す「political」を返します。

ルート案内: ルート（DirectionsRoute）

注: 従来の DirectionsTrip オブジェクトの名前が DirectionsRoute に変更されました。ルートは、親ルートの 1 区間だけでなく、出発地から目的地までの経路全体を表すようになったことにご注意ください。

DirectionsRoute には指定された出発地と目的地からの結果が 1 つ格納されます。この区間には地点が指定されたかどうかによって、1 つ以上の区間（タイプ DirectionsLeg）が含まれます。また、ルートには経路情報の他に、著作権や警告に関する情報など、ユーザーへの表示が必要な内容も含まれています。

DirectionsRoute は、次のフィールドを含むオブジェクト リテラルです。

• legs[] には DirectionsLeg オブジェクトの配列が格納され、各オブジェクトには、指定されたルート内の 2 つの地点からのルートの区間についての情報が格納されています。指定した地点や目的地ごとに、1 つの区間が存在します（地点がないルートには DirectionsLeg が 1 つだけ含まれます）。各区間は一連の DirectionStep で構成されます。
• waypoint_order には、ルートを計算する際の地点の順序を示す配列が格納されます。DirectionsRequest が optimizeWaypoints: true を渡した場合、この配列には変更された順序が含まれることがあります。
• overview_path には、結果のルートのおおよその（平滑化された）パスを示す LatLng の配列が格納されます。
• overview_polyline には、エンコードされたポリラインによるルート表現を保持する単一の points オブジェクトが格納されます。このポリラインは、結果のルートを近似した（平滑化した）経路です。
• bounds には、この所定のルートに沿ったポリラインの境界を示す LatLngBounds が格納されます。
• copyrights には、このルートと一緒に表示する著作権表示のテキストが格納されます。
• warnings[] には、これらのルートを表示するときに一緒に表示する警告の配列が格納されます。提供された DirectionsRenderer オブジェクトを使用しない場合は、この警告を自身で処理して表示する必要があります。
• fare には、このルートの合計運賃（切符の合計金額）が含まれます。このプロパティは、交通機関のリクエストにおいて、すべての区間で運賃情報が取得できる場合にのみ返されます。次の情報が含まれます。
  • currency: ISO 4217 通貨コード は、運賃を表示する通貨を指定します。
  • value は、上記で指定した通貨での合計運賃です。

ルート案内: 区間（DirectionsLeg）

注: 従来の DirectionsRoute オブジェクトの名前が DirectionsLeg に変更されました。

DirectionsLeg は、計算されたルートでの出発地から目的地への行程の 1 つの区間を定義します。地点がないルートは 1 つの「区間」で構成されますが、1 つ以上の地点があるルートは、行程の特定の区間に対応する 1 つ以上の区間で構成されます。

DirectionsLeg は、次のフィールドを含むオブジェクト リテラルです。

• steps[] には、行程の区間の各ステップについての情報を示す DirectionsStep オブジェクトの配列が格納されています。

• distance はこの区間でカバーされる距離の合計を、次の形式の Distance オブジェクトとして示します。

  • value はメートル単位の距離を表します。
  • text には距離の文字列表現が格納され、デフォルトで出発地に使用されている単位で表示されます（たとえば、米国内の出発地であればマイル表記になります）。この単位系は、UnitSystem を元のクエリで具体的に設定することでオーバーライドできます。使用する単位系にかかわらず、distance.value フィールドにはメートルで表現された値が格納されます。

  距離が不明な場合、これらのフィールドは定義されないことがあります。

• duration はこの区間にかかる所要時間の合計を、次の形式の Duration オブジェクトとして示します。

  • value は所要時間を秒単位で表します。
  • text には所要時間の文字列表現が格納されます。

  所要時間が不明な場合、これらのフィールドは定義されないことがあります。

• duration_in_traffic は、現在の交通状況を考慮して計算した、この区間の合計所要時間です。duration_in_traffic は、次のすべての条件を満たす場合にのみ返されます。

  • リクエストに立ち寄る地点が含まれていない（stopover が true の地点が含まれていない）。
  • リクエストの対象が運転ルート（mode が driving に設定されている）。
  • departureTime がリクエストの drivingOptions フィールドの一部として含まれている。
  • リクエストしたルートの交通状況を取得できる。

  duration_in_traffic には次のフィールドがあります。

  • value は所要時間を秒単位で表します。
  • text には、人間が判読可能な形式の所要時間が格納されます。
• arrival_time には、この区間の到着予定時間が格納されます。このプロパティは、乗換案内のルートに対してのみ返されます。結果は、以下の 3 つのプロパティを持つ Time オブジェクトとして返されます。
  • value: JavaScript Date オブジェクトで指定される時刻。
  • text: 文字列で指定される時刻。この時刻は、交通機関の停止地点のタイムゾーンで表示されます。
  • time_zone: この駅のタイムゾーン。この値は、IANA タイムゾーン データベースで定義されたタイムゾーンの名前です（例: America/New_York）。
• departure_time: この区間の出発予定時刻が Time オブジェクトとして指定されて格納されます。departure_time は乗換案内でのみ使用できます。
• start_location にはこの区間の出発地の LatLng が格納されています。ルート ウェブサービスは始点と終点に最も近い移動手段（通常は道路）を使用して位置を計算するため、start_location はこの区間の指定された出発地点とは異なる場合があります（道路が出発地点付近にない場合など）。
• end_location にはこの区間の目的地の LatLng が格納されています。DirectionsService は始点と終点に最も近い移動手段（通常は道路）を使用して位置を計算するため、end_location はこの区間の指定された目的地とは異なる場合があります（道路が目的地付近にない場合など）。
• start_address には、この区間の始点の住所が人間が読める形式で格納されています（通常は住所形式）。
  
  このコンテンツはそのまま読み取られます。フォーマット済み住所をプログラムで解析しないでください。
• end_address にはこの区間の終点の住所が人間が読める形式で格納されています（通常は住所形式）。
  
  このコンテンツはそのまま読み取られます。フォーマット済み住所をプログラムで解析しないでください。

ルート案内: ステップ（DirectionsStep）

DirectionsStep はルートの最小単位で、行程内の特定の 1 つの指示を説明する 1 つのステップが含まれています。例: 「国道 16 号線を左折」なお、ステップには進路の説明だけでなく、現在のステップと次のステップとの関連性を表す距離や所要時間などの情報も含まれます。たとえば、「国道 20 号線に合流」という指示のステップには、「37 km」や「40 分」といった次のステップまでの距離や所要時間を表す情報が含まれます。

ルートサービスを使用して乗換案内を検索すると、ステップの配列には、乗換案内固有の追加情報が transit オブジェクトの形式で含まれます。ルートに複数の移動手段が含まれる場合は、徒歩または運転のステップに関する詳細なルートが steps[] 配列で提供されます。たとえば、東京駅を出発地点、二重橋を目的地点とする徒歩ステップを考えます。このステップの steps[] 配列には、「西に進む」、「（日比谷通りの）横断歩道を渡る」、「（内堀通りを）左折する」などの詳細な徒歩ルートが格納されます。

DirectionsStep は、次のフィールドを含むオブジェクト リテラルです。

• instructions には、テキスト文字列内にこのステップの指示が格納されています。
• distance には、このステップで次のステップまでにカバーされる距離が Distance オブジェクトとして格納されています（上述の DirectionsLeg の説明を参照してください）。距離が不明な場合、このフィールドは定義されないことがあります。
• duration: このステップの標準的な所要時間が Duration オブジェクトとして格納されます（上述の DirectionsLeg の説明を参照してください）。所要時間が不明な場合、このフィールドは定義されないことがあります。
• start_location にはこのステップの始点のジオコードされた LatLng が格納されています。
• end_location にはこのステップの終点の LatLng が格納されています。
• polyline には、エンコードされたポリラインによるステップ表現を保持する単一の points オブジェクトが格納されます。このポリラインは、ステップを近似した（平滑化した）経路です。
• steps[]: 乗換案内における徒歩または運転のステップの詳細なルートを含む DirectionsStep オブジェクト リテラル。サブステップは乗換案内の場合のみ提示されます。
• travel_mode には、このステップで使用する TravelMode が格納されます。乗換案内には、徒歩経路と乗換案内の両方が含まれることがあります。
• path には、このステップのコースを説明する LatLngs の配列が格納されます。
• transit には、到着時刻と出発時刻、路線名など、交通機関固有の情報が含まれます。

交通機関固有の情報

乗換案内では、他の移動手段とは無関係な追加情報が返されます。これらの追加プロパティは、TransitDetails オブジェクトを介し、DirectionsStep のプロパティとして返されます。下記のように、TransitDetails オブジェクトから、TransitStop、TransitLine、TransitAgency、VehicleType オブジェクトの追加情報にアクセスできます。

交通機関の詳細

TransitDetails オブジェクトは、以下のプロパティを公開します。

• arrival_stop には、到着駅 / 停車地を表す、次のプロパティを備えた TransitStop オブジェクトが格納されます。
  • name: 交通機関の駅や停留所の名前。例: 「Union Square」。
  • location: LatLng で表される交通機関の駅や停留所の場所。
• departure_stop には、出発駅 / 停車地を表す TransitStop オブジェクトが格納されます。
• arrival_time には、3 つのプロパティを持つ Time オブジェクトとして指定される到着時刻が格納されます。
  • value: JavaScript Date オブジェクトで指定される時刻。
  • text: 文字列で指定される時刻。この時刻は、交通機関の停止地点のタイムゾーンで表示されます。
  • time_zone: この駅のタイムゾーン。この値は、IANA タイムゾーン データベースで定義されたタイムゾーンの名前です（例: America/New_York）。
• departure_time には、Time オブジェクトとして指定される出発時刻が格納されます。
• headsign は、車両または出発駅に示されている、この路線を進む方向を指定します。多くの場合、この行先は終点に相当します。
• headway: データが存在する場合、同じ場所における現時点での推定出発間隔を指定します。たとえば、headway 値が 600 の場合、バスを逃すと 10 分待つことになると予想されます。
• line には、このステップで使用される交通機関の路線に関する情報を含む TransitLine オブジェクト リテラルが格納されます。TransitLine は路線の名前と運営者のほか、TransitLine の参考ドキュメントに説明されているその他のプロパティを示します。
• num_stopsには、このステップ内の停車地の数が格納されます。到着停車地は含まれますが、出発停車地は含まれません。たとえば、停車地 A から出発して、停車地 B と C を経由し、停車地 D に到着するルートの場合、num_stops は 3 を返します。

路線

TransitLine オブジェクトは、以下のプロパティを公開します。

• name にはこの路線の正式名称が格納されます。例: 「7 Avenue Express」、「14th St Crosstown」など。
• short_name には、この路線の略称が格納されます。これは通常、「2」や「M14」などの路線番号です。
• agencies は、単一の TransitAgency オブジェクトを格納する配列です。TransitAgency オブジェクトは、次のようなプロパティとして、この行の演算子に関する情報を示します。
  • name には交通機関の名前が格納されます。
  • phone には交通機関の電話番号が格納されます。
  • url には交通機関の URL が格納されます。

  注: DirectionsRenderer オブジェクトを使用せずに手動で乗換案内を表示する場合は、ルートを提供する交通機関運営者の名前と URL を表示する必要があります。

• url には、交通機関運営者が提供している、この交通機関の路線の URL が格納されます。
• icon には、この路線を表すアイコンの URL が格納されます。多くの都市では、車両タイプごとに定められている共通のアイコンを使用しています。ニューヨーク市地下鉄など一部の路線では、その路線専用のアイコンを使っています。
• color には、この交通機関に対して一般的に使用される色が格納されます。この色は、#FF0033 のような 16 進文字列で指定されます。
• text_color には、この路線の表記に通常使用されるテキストの色が含まれます。この色は、16 進文字列で指定されます。
• vehicle には、以下のプロパティを含む Vehicle オブジェクトが格納されます。
  • name には、この路線の車両名が格納されます。 例: 「地下鉄」
  • type にはこの路線で使用される車両のタイプが格納されます。サポートされている値の完全なリストは、車両タイプをご覧ください。
  • icon には、この車両タイプに一般的に関連付けられるアイコンの URL が格納されます。
  • local_icon には、地域の交通標識に基づき、乗り物の種別に関連付けられたアイコンの URL が含まれます。

乗り物の種別

VehicleType オブジェクトは以下のプロパティを公開します。

DirectionsResults の検査

DirectionsResults のコンポーネント（DirectionsRoute、DirectionsLeg、DirectionsStep、TransitDetails）は、ルートのレスポンスの解析時に検査して使用できます。

重要: DirectionsRendererDirectionsRenderer オブジェクトを使用せずに手動で乗換案内を表示する場合は、ルートを提供する交通機関運営者の名前と URL を表示する必要があります。

以下の例では、ニューヨークの観光名所までの徒歩ルートを描画します。ルートの DirectionsStep を検査して各ステップにマーカーを追加し、そのステップに対する指示テキストを持つ InfoWindow に情報を貼り込みます。

注: ここでは徒歩ルートを計算しているので、別の <div> パネルにはユーザーに対する警告も表示されます。

var map; var directionsRenderer; var directionsService; var stepDisplay; var markerArray = [];  function initMap() {   // Instantiate a directions service.   directionsService = new google.maps.DirectionsService();    // Create a map and center it on Manhattan.   var manhattan = new google.maps.LatLng(40.7711329, -73.9741874);   var mapOptions = {     zoom: 13,     center: manhattan   }   map = new google.maps.Map(document.getElementById('map'), mapOptions);    // Create a renderer for directions and bind it to the map.   var rendererOptions = {     map: map   }   directionsRenderer = new google.maps.DirectionsRenderer(rendererOptions)    // Instantiate an info window to hold step text.   stepDisplay = new google.maps.InfoWindow(); }  function calcRoute() {    // First, clear out any existing markerArray   // from previous calculations.   for (i = 0; i < markerArray.length; i++) {     markerArray[i].setMap(null);   }    // Retrieve the start and end locations and create   // a DirectionsRequest using WALKING directions.   var start = document.getElementById('start').value;   var end = document.getElementById('end').value;   var request = {       origin: start,       destination: end,       travelMode: 'WALKING'   };    // Route the directions and pass the response to a   // function to create markers for each step.   directionsService.route(request, function(response, status) {     if (status == "OK") {       var warnings = document.getElementById("warnings_panel");       warnings.innerHTML = "" + response.routes[0].warnings + "";       directionsRenderer.setDirections(response);       showSteps(response);     }   }); }  function showSteps(directionResult) {   // For each step, place a marker, and add the text to the marker's   // info window. Also attach the marker to an array so we   // can keep track of it and remove it when calculating new   // routes.   var myRoute = directionResult.routes[0].legs[0];    for (var i = 0; i < myRoute.steps.length; i++) {       var marker = new google.maps.Marker({         position: myRoute.steps[i].start_point,         map: map       });       attachInstructionText(marker, myRoute.steps[i].instructions);       markerArray[i] = marker;   } }  function attachInstructionText(marker, text) {   google.maps.event.addListener(marker, 'click', function() {     stepDisplay.setContent(text);     stepDisplay.open(map, marker);   }); }

以下は HTML の本文です。

<div> <strong>Start: </strong> <select id="start">   <option value="penn station, new york, ny">Penn Station</option>   <option value="grand central station, new york, ny">Grand Central Station</option>   <option value="625 8th Avenue New York NY 10018">Port Authority Bus Terminal</option>   <option value="staten island ferry terminal, new york, ny">Staten Island Ferry Terminal</option>   <option value="101 E 125th Street, New York, NY">Harlem - 125th St Station</option> </select> <strong>End: </strong> <select id="end" onchange="calcRoute();">   <option value="260 Broadway New York NY 10007">City Hall</option>   <option value="W 49th St & 5th Ave, New York, NY 10020">Rockefeller Center</option>   <option value="moma, New York, NY">MOMA</option>   <option value="350 5th Ave, New York, NY, 10118">Empire State Building</option>   <option value="253 West 125th Street, New York, NY">Apollo Theatre</option>   <option value="1 Wall St, New York, NY">Wall St</option> </select> <div>

サンプルを表示

ルート内での地点（ウェイポイント）の使用

DirectionsRequest で説明したように、ルートサービスを使用して徒歩、自転車、または運転ルートを計算するときに、「地点」（タイプ DirectionsWaypoint）を指定することもできます。地点は乗換案内に対しては利用できません。 地点を使用すると、地点として追加した場所を通るルートを取得できます。

waypoint は次のフィールドで構成されます。

• location（必須）は地点の住所を指定します。
• stopover（省略可能）は、この地点が実際の停止地点なのか（true）、経由を希望しているだけなのか（false）を指定します。停止地点はデフォルトでは true です。

デフォルトでは、指定した地点を指定した順番で通るルートが計算されます。オプションで、optimizeWaypoints: true を DirectionsRequest 内に渡すと、ルートサービスで、より効率的な順序に地点を並べ替えて、指定されたルートを最適化できます（この最適化には巡回セールスマン問題が応用されています）。最適化で最も重視されるのは移動時間ですが、最も効率的なルートを判断する際は、距離や進路変更の回数なども考慮される場合があります。ルートサービスでルートを最適化するには、すべての地点が立ち寄り場所である必要があります。

ルートサービスで地点の順序を最適化するよう指定した場合は、その順序が DirectionsResult オブジェクト内の waypoint_order フィールドで返されます。

次の例では、始点や終点、地点を変えて、米国を横断するさまざまなルートを計算できます（複数の地点を選択するには、リスト内でアイテムを選択するときに Ctrl キーを押しながらクリックします）。routes.start_address と routes.end_address を検査して、各ルートの始点と終点のテキストを取得します。

function initMap(): void {   const directionsService = new google.maps.DirectionsService();   const directionsRenderer = new google.maps.DirectionsRenderer();   const map = new google.maps.Map(     document.getElementById("map") as HTMLElement,     {       zoom: 6,       center: { lat: 41.85, lng: -87.65 },     }   );    directionsRenderer.setMap(map);    (document.getElementById("submit") as HTMLElement).addEventListener(     "click",     () => {       calculateAndDisplayRoute(directionsService, directionsRenderer);     }   ); }  function calculateAndDisplayRoute(   directionsService: google.maps.DirectionsService,   directionsRenderer: google.maps.DirectionsRenderer ) {   const waypts: google.maps.DirectionsWaypoint[] = [];   const checkboxArray = document.getElementById(     "waypoints"   ) as HTMLSelectElement;    for (let i = 0; i < checkboxArray.length; i++) {     if (checkboxArray.options[i].selected) {       waypts.push({         location: (checkboxArray[i] as HTMLOptionElement).value,         stopover: true,       });     }   }    directionsService     .route({       origin: (document.getElementById("start") as HTMLInputElement).value,       destination: (document.getElementById("end") as HTMLInputElement).value,       waypoints: waypts,       optimizeWaypoints: true,       travelMode: google.maps.TravelMode.DRIVING,     })     .then((response) => {       directionsRenderer.setDirections(response);        const route = response.routes[0];       const summaryPanel = document.getElementById(         "directions-panel"       ) as HTMLElement;        summaryPanel.innerHTML = "";        // For each route, display summary information.       for (let i = 0; i < route.legs.length; i++) {         const routeSegment = i + 1;          summaryPanel.innerHTML +=           "<b>Route Segment: " + routeSegment + "</b><br>";         summaryPanel.innerHTML += route.legs[i].start_address + " to ";         summaryPanel.innerHTML += route.legs[i].end_address + "<br>";         summaryPanel.innerHTML += route.legs[i].distance!.text + "<br><br>";       }     })     .catch((e) => window.alert("Directions request failed due to " + status)); }  declare global {   interface Window {     initMap: () => void;   } } window.initMap = initMap;
index.ts

function initMap() {   const directionsService = new google.maps.DirectionsService();   const directionsRenderer = new google.maps.DirectionsRenderer();   const map = new google.maps.Map(document.getElementById("map"), {     zoom: 6,     center: { lat: 41.85, lng: -87.65 },   });    directionsRenderer.setMap(map);   document.getElementById("submit").addEventListener("click", () => {     calculateAndDisplayRoute(directionsService, directionsRenderer);   }); }  function calculateAndDisplayRoute(directionsService, directionsRenderer) {   const waypts = [];   const checkboxArray = document.getElementById("waypoints");    for (let i = 0; i < checkboxArray.length; i++) {     if (checkboxArray.options[i].selected) {       waypts.push({         location: checkboxArray[i].value,         stopover: true,       });     }   }    directionsService     .route({       origin: document.getElementById("start").value,       destination: document.getElementById("end").value,       waypoints: waypts,       optimizeWaypoints: true,       travelMode: google.maps.TravelMode.DRIVING,     })     .then((response) => {       directionsRenderer.setDirections(response);        const route = response.routes[0];       const summaryPanel = document.getElementById("directions-panel");        summaryPanel.innerHTML = "";        // For each route, display summary information.       for (let i = 0; i < route.legs.length; i++) {         const routeSegment = i + 1;          summaryPanel.innerHTML +=           "<b>Route Segment: " + routeSegment + "</b><br>";         summaryPanel.innerHTML += route.legs[i].start_address + " to ";         summaryPanel.innerHTML += route.legs[i].end_address + "<br>";         summaryPanel.innerHTML += route.legs[i].distance.text + "<br><br>";       }     })     .catch((e) => window.alert("Directions request failed due to " + status)); }  window.initMap = initMap;
index.js

地点の使用制限と制限事項

次の使用制限と制限事項が適用されます。

• Maps JavaScript API でルートサービスを利用するときは、出発地と目的地に加え、最大 25 個の地点を使用できます。この制限は Directions API（従来版）ウェブサービスにも適用されます。
• Directions API（従来版）ウェブサービスの場合、ユーザーは、出発地と目的地に加え、25 個の地点を使用できます。
• Google Maps Platform プレミアム プランをご利用のお客様は、出発地と目的地に加え、25 個の地点を使用できます。
• 地点は乗換案内では利用できません。

ドラッグ可能なルート

DirectionsRenderer で動的に表示された自転車、徒歩、運転ルートが「ドラッグ可能」な場合、ユーザーは結果として地図上に表示された経路をクリック＆ドラッグすることで、ルートの選択や変更を行うことができます。レンダラの表示をドラッグ可能にするには、draggable プロパティを true に設定します。なお、乗換案内をドラッグ可能にすることはできません。

ドラッグ可能なルートの場合、ユーザーはレンダリングされた経路の任意の地点（または地点）を選択して、そのコンポーネントを新しい位置に動かすことができます。変更後の経路は、DirectionsRenderer によって動的に更新されて表示されます。ユーザーがドロップすると、暫定的な地点（白い小さなマーカー）が地図に追加されます。経路のセグメントを選択して動かすと、そのルートの該当区間が変更され、地点マーカー（始点と終点を含む）を選択して動かすと、その地点を通るルートの区間が変更されます。

ドラッグ可能なルートの変更や表示はクライアント側で処理します。表示中のルートをユーザーが更新したことを検知するには、DirectionsRenderer の directions_changed イベントを監視して処理します。

次のコードでは、オーストラリア西海岸のパースから東海岸のシドニーまでのルートが表示されます。このコードでは、directions_changed イベントを監視して、行程の全区間の総移動距離を更新しています。

function initMap(): void {   const map = new google.maps.Map(     document.getElementById("map") as HTMLElement,     {       zoom: 4,       center: { lat: -24.345, lng: 134.46 }, // Australia.     }   );    const directionsService = new google.maps.DirectionsService();   const directionsRenderer = new google.maps.DirectionsRenderer({     draggable: true,     map,     panel: document.getElementById("panel") as HTMLElement,   });    directionsRenderer.addListener("directions_changed", () => {     const directions = directionsRenderer.getDirections();      if (directions) {       computeTotalDistance(directions);     }   });    displayRoute(     "Perth, WA",     "Sydney, NSW",     directionsService,     directionsRenderer   ); }  function displayRoute(   origin: string,   destination: string,   service: google.maps.DirectionsService,   display: google.maps.DirectionsRenderer ) {   service     .route({       origin: origin,       destination: destination,       waypoints: [         { location: "Adelaide, SA" },         { location: "Broken Hill, NSW" },       ],       travelMode: google.maps.TravelMode.DRIVING,       avoidTolls: true,     })     .then((result: google.maps.DirectionsResult) => {       display.setDirections(result);     })     .catch((e) => {       alert("Could not display directions due to: " + e);     }); }  function computeTotalDistance(result: google.maps.DirectionsResult) {   let total = 0;   const myroute = result.routes[0];    if (!myroute) {     return;   }    for (let i = 0; i < myroute.legs.length; i++) {     total += myroute.legs[i]!.distance!.value;   }    total = total / 1000;   (document.getElementById("total") as HTMLElement).innerHTML = total + " km"; }  declare global {   interface Window {     initMap: () => void;   } } window.initMap = initMap;
index.ts

function initMap() {   const map = new google.maps.Map(document.getElementById("map"), {     zoom: 4,     center: { lat: -24.345, lng: 134.46 }, // Australia.   });   const directionsService = new google.maps.DirectionsService();   const directionsRenderer = new google.maps.DirectionsRenderer({     draggable: true,     map,     panel: document.getElementById("panel"),   });    directionsRenderer.addListener("directions_changed", () => {     const directions = directionsRenderer.getDirections();      if (directions) {       computeTotalDistance(directions);     }   });   displayRoute(     "Perth, WA",     "Sydney, NSW",     directionsService,     directionsRenderer,   ); }  function displayRoute(origin, destination, service, display) {   service     .route({       origin: origin,       destination: destination,       waypoints: [         { location: "Adelaide, SA" },         { location: "Broken Hill, NSW" },       ],       travelMode: google.maps.TravelMode.DRIVING,       avoidTolls: true,     })     .then((result) => {       display.setDirections(result);     })     .catch((e) => {       alert("Could not display directions due to: " + e);     }); }  function computeTotalDistance(result) {   let total = 0;   const myroute = result.routes[0];    if (!myroute) {     return;   }    for (let i = 0; i < myroute.legs.length; i++) {     total += myroute.legs[i].distance.value;   }    total = total / 1000;   document.getElementById("total").innerHTML = total + " km"; }  window.initMap = initMap;
index.js