ルートサービスを使って、出発地から目的地への徒歩ルートを表示させてみます。
出発地と目的地をSelectボックスで選択すると２地点間の徒歩ルートを地図上に表示するサンプルコードを作ってみます。
デモとコードサンプルはこちら。
サンプルコードの説明
１）出発地、目的地を指定するフォーム（HTML、スクリプト）
①ブートストラップ３でレイアウトを設定
<div class=”form-group”>、<select class=”form-control”>など。
②AngularJSの”ng-options”を使ってselectタグとそれに紐づくoptionタグを生成
<select class=”form-control” ng-model=”routePoints.end”
ng-options=”route.name for route in map.routes.end”>
</select>
・スクリプト内の”routes.end”配列からデータを読み出し、optionタグを生成。
・Selectタグで選択された値は、”routePoints.end”に保持されてスクリプトに渡される。
・Selectタグの初期表示される項目を設定
それぞれの配列の最初の値を初期表示させる。
$scope.routePoints.start = $scope.map.routes.start[0];
$scope.routePoints.end = $scope.map.routes.end[0];
③フォームの送信ボタンクリックで、ルート計算実行
<button ng-click=”calcRoute(routePoints)” type=”submit” class=”btn btn-default”>送信</button>
２）ルートサービスの使用方法（スクリプト）
①ルート計算の条件（出発地、目的地、徒歩/電車などのモード）を設定
フォームのSelectボックスで指定された値を取得し、ルート計算の条件を設定
var start = routePoints.start.latlng;
var end = routePoints.end.latlng;
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.WALKING
};
②ルートを計算
上記①の条件を引数に指定してDirectionsServiceオブジェクトのroute()メソッドを実行。
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
※directionsService.routeの構文
directionsService.route(request:DirectionsRequest, callback:function(DirectionsResult, DirectionsStatus))
③ルートの計算結果を表示
上記②のdirectionsService.routeメソッドのコールバック関数内で処理。
ルート計算のステータスを上記コードの”status”（DirectionsStatusオブジェクト）を使って確認し、OKだったらルート結果を地図上に表示。
ルート計算の結果は、上記コードの”response”（DirectionsResultオブジェクト）に保持されていて、DirectionsRendererオブジェクトを使って表示。