LIGデザイナー採用
LIGデザイナー採用
2018.04.09
#140
それいけ!フロントエンド

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はドヤ顔できるんですごく好きです。

みなさんも是非ドヤ顔してみてください!