Google Maps APIのDirectionsServiceを使って目的地までのルートを表示してみよう！

みなさんこんにちは。はっちゃんです。
先日、歯医者に行って神経を抜いてきました。

……もし歯に痛みを感じたら、すぐ歯医者に行きましょう！
早ければ早いほどいいです！

さて本題に入ります。
今回は、Google Maps APIのDirectionsServiceを使用してルートを自動で取得してみます。

DirectionsServiceとは

DirectionsServiceとは

Google Maps APIの機能のひとつで、さまざまな交通手段を利用したルートが計算できます。このオブジェクトは Google Maps API のルートサービスと通信を行い、ルートサービスはルートリクエストを受信して計算結果を返します。こうして得られたルートの結果は、自身で処理したり、DirectionsRenderer オブジェクトを使ってレンダリングしたりできます。

さっそく使ってみましょう

試しに上野駅からLIGまでの道のりを表示してみましょう。

See the Pen Google Maps Api DirectionsService by k_hatsushi (@hatsushi_kazuya) on CodePen.

おー、ちゃんとルートが表示できてるっぽいですね。
ではそのコードの中身を覗いてみましょう。

コードの中身はどうなっているか

見慣れないのはこのあたりですね。

let rendererOptions = {
map: map, // 描画先の地図
draggable: true, // ドラッグ可
preserveViewport: true // centerの座標、ズームレベルで表示
};
let directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
let directionsService = new google.maps.DirectionsService();
directionsDisplay.setMap(map);
let request = {
origin: new google.maps.LatLng(startLatLng[0], startLatLng[1]), // スタート地点
destination: new google.maps.LatLng(targetLatLng[0], targetLatLng[1]), // ゴール地点
travelMode: google.maps.DirectionsTravelMode.WALKING, // 移動手段
};
directionsService.route(request, function(response,status) {
if (status === google.maps.DirectionsStatus.OK) {
new google.maps.DirectionsRenderer({
map: map,
directions: response,
suppressMarkers: true // デフォルトのマーカーを削除
});
let leg = response.routes[0].legs[0];
makeMarker(leg.end_location, markers.goalMarker, map);
setTimeout(function() {
map.setZoom(16); // ルート表示後にズーム率を変更
});
}
});

横に簡単に説明を添えていますが、特に重要な部分を説明していきますね。

preserveViewport: true
このオプションを設定しないと、描画されたルートが映りきるズーム率から変更することができません。

全体ではなく、ピンポイントのズームを後から設定する際は必須になります。
travelMode: google.maps.DirectionsTravelMode.WALKING
目的地までの移動手段になります。今回は徒歩を設定しています。

他にも自動車、自転車、電車のモードがあり、それぞれルートが変わります。
suppressMarkers: true
これは、デフォルトだとおなじみの赤いマーカーが自動で置かれてしまうのですが、

それを削除するときにtrue設定します。

今回のコードでは、その後に任意のマーカーを設置しています。
map.setZoom(16);
ルートが表示されたあとに、ズーム率を変えています。

あまりきれいな書き方ではありませんが、setTimeoutで非同期で実行しないとうまくいきませんでした。
まとめ
いかがでしょうか。意外と簡単でしょう？

でもね、割と知らない人が多く、ちょっとしたドヤ顔ができるので僕のお気に入りです。
僕はドヤ顔できる技術が好きで、逆にドヤ顔できないとやる気が起きないんですが、

Google Maps API DirectionsServiceはドヤ顔できるんですごく好きです。
みなさんも是非ドヤ顔してみてください！
         
                         
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
              Webサイト制作の実績・料金を見る