Google Map APIでルート表示をする

ルート距離の測定やルート案内の表示をWebサイトに実装

　Google Maps APIの機能を利用すると、複雑なルートの作成に伴う作業を大幅に減らすことができます。今回は、Google Maps APIを使用して、ルート距離の測定やルート案内の表示をWebサイトに実装する方法を紹介します。

はじめに

　Google Maps APIを取り上げるこの不定期シリーズの以前の回では、Google Maps APIとGoogleMapAPIというPHPライブラリを使用して、地図に沿ったルートのプロットと計算を行いました。このような機能の用途は数多くあり、例えば2地点間の直線距離の測定や、単純なジョギングルートやサイクリングルートの距離を計算する簡易ゲージなどが考えられます。しかし便利ではあるものの、より複雑なルートの距離を計算しようとすると、このような機能の限界がすぐに明らかになってきます。

　例えば、オハイオ州のコロンバスからクリーブランドまでの道筋をユーザーに案内するような、非常に長いルートを図示する場合はどうでしょうか？ 図1のように正確にルートを図示するには、おそらくこのアプローチではかなり手間がかかるでしょう。

図1：複雑なルートの図示

　ありがたいことにGoogle Maps APIの機能を利用すれば、このような複雑なルートの作成に伴う作業を大幅に減らすことができます。この機能を使えば、単に出発地点と到着地点をクリックし、最短と思われるルートをAPIにプロットさせるだけで、複雑なマルチポイントルートを作成できます。すごいと思いませんか？ このチュートリアルでは、この機能をWebサイトに実装し、ルート距離の測定や、Google マップで利用できるようなルート案内の表示を行うための方法を解説します。

ルートのポイント指定

　まず、このAPIがどのようにして幹線道路とその他のわき道に沿ってルートをプロットするかを把握しておく必要があります。これはloadFromWaypoints()メソッドによって行われます。このメソッドは最大25個の座標（あるいは住所、または座標と住所の混合）を含む配列を受け取り、これらのポイントをつなぐルートを作り出します。

　次に示す関数は、地図にマーカーを追加し、そのマーカーの座標をcoordinatesという配列（標準のinitialize()関数で定義）に追加します。この時点でcoordinates配列に複数の座標セットが含まれている場合は、loadFromWaypoints()メソッドが呼び出され、座標間のルートが描画されます。

function plotRoute(overlay, latlng) {
  // Create a new marker based on the coordinates
  var marker = new GMarker(latlng);
  
  // Instantiate the GDirections class
  var directions = new GDirections(map);
  
  // Add the new marker to the map
  map.addOverlay(marker);
 
  // Create the new array element
  coordinates_array_element = latlng.lat() + "," + latlng.lng();
 
  // Add the new array element to the map
  coordinates.push(coordinates_array_element);
 
  // If > one point on the map, plot the route between these two points
  if (coordinates.length > 1) {
 directions.loadFromWaypoints(coordinates);
  }
}

　以前の記事で紹介したように、ユーザーが地図をクリックしたときに関数を実行するには、次のようにして地図にリスナーを加えます。この呼び出しはinitialize()関数に配置します。initialize()関数の用途がよくわからない場合は、このシリーズの以前の記事を参考にしてください。

GEvent.addListener(map, "click", plotRoute);

高速道路の回避

　コロンバス－クリーブランド間にプロットされるルートは、必然的に、オハイオ州の主要高速道路の1つである「I-71」に沿ってユーザーを案内します。しかし、コロンバス－クリーブランド間のマラソンサイクリングを計画している場合はどうしますか？ その場合は、loadFromWaypoints()メソッドの呼び出しを次のように変更すれば、高速道路の使用を避けるようAPIに指示できます。

directions.loadFromWaypoints(coordinates, {"avoidHighways": true});

　変更したら、地図をリロードし、再度コロンバス－クリーブランド間のポイントをプロットしてください。図2に示すように、コロンバスから市外に向かうルートがI-71を避けるようになります。

図2：ルート沿いの高速道路の回避

　同様にして、その他のプロパティを渡すこともできます。例えば地図の場所を変更するための"locale"や、ルート全体が地図ビューポート内に表示されるようズームレベルを自動調節するための"preserveViewport"などがあります。利用できるプロパティの完全なリストについてはAPIドキュメントを参照ください。