Google Maps APIを利用して表示するGoogleマップで、スタート地点からゴール地点までのルートを表示します。
ルート表示には事前にGoogle Developer Consoleで下記の設定が必要です。
1. Directions APIを有効化
2. 認証情報からGoogleマップで使用するAPIキーを選択
3. APIキーの制限で、キーで呼び出すことのできる有効なAPIにDirections APIを追加
・Maps JavaScript API
・Directions API
html、css、Googleマップのルート表示以外のjavascriptは下記の記事と同様です。
javascriptのコードです。
今回はJR代々木駅西口からドコモタワーまでのルートを表示します。ルート表示はDirectionsServiceクラスのオブジェクトとDirectionsRendererクラスのオブジェクトを作成するのがポイントです。
移動手段はWALKING（徒歩）を設定していますが、JRの西口改札を通って東口改札から出る最短ルートを表示してしまうため、waypoints（経由地点）に踏切を指定して改札を通らないようにします。なお、waypointsのオプションstopover: falseは立ち寄りせず通過する設定で、マーカーの表示を無しにできます。また、DirectionsRendererのオプションでpreserveViewport: trueを設定し、ビューの移動（ズーム率を変更してルート全体を表示）を行わないようにしています。
function initMap() {
var latlng = new google.maps.LatLng(35.6843218, 139.70311200000003); //中心の緯度, 経度
var map = new google.maps.Map(document.getElementById('maps'), {
zoom: 17,
center: latlng
});
var yoyogi = new google.maps.LatLng(35.683049, 139.702055);
var directionsService = new google.maps.DirectionsService();
var directionsRenderer = new google.maps.DirectionsRenderer();
var request = {
origin: yoyogi, //スタート地点
destination: latlng, //ゴール地点
waypoints: [ //経由地点
{location: new google.maps.LatLng(35.683021,139.702668), stopover: false}
],
travelMode: google.maps.DirectionsTravelMode.WALKING, //移動手段
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setOptions({
preserveViewport: true //ズーム率を変更してルート全体を表示しない
});
// ルート検索の結果を地図上に描画
directionsRenderer.setDirections(result);
directionsRenderer.setMap(map);
}
});
}