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

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

ルート距離と移動時間の計算

　また、GDirectionクラスのgetDistance()メソッドやgetDuration()メソッドを使用して、距離の測定や移動時間の推定ができます。しかし、これらの値はloadFromWaypoints()メソッドがルートを返すまで返されないため、適切なタイミングで値を取得するにはリスナーを使用する必要があります。例えば、次のリスナーはdirectionsオブジェクトのロードを待機します。directionsオブジェクトがロードされたら移動時間を取得し、分単位に変換し、Webページのどこかに配置されているdurationというdiv要素の内容を更新します。

GEvent.addListener(directions, "load", function() {
  var duration = (directions.getDuration().seconds / 60).toFixed(2);
  document.getElementById("duration").innerHTML = duration + 
  " minutes to arrive at your destination.";
});

図3：推定移動時間の表示

ルート案内の表示

　ある地点から次の地点まで、ユーザーに道案内を提供する場合を考えてみましょう。この機能を追加するのは非常に簡単です。次のように、GDirectionsオブジェクトの呼び出しに道案内の挿入先となるdiv要素を指定するだけです。

var directions = new GDirections(map, document.getElementById("sidebar"));

　sidebarというdiv要素をWebページに追加すると、図4のようなインターフェースを作成できます。

図4　道案内の追加

まとめ

　今回と前回の記事では、地図上の複数のポイント間の距離を測定する2つの簡単な方法を紹介しました。この方法は、直線距離と道なりの距離の両方に対応しています。これらの機能を使って何か面白いものができたら、私にもぜひ教えてください！