お盆期間を避け、比較的混んでいない日を選んで予定を組めるので本当に助かります。

今年のフジロックは見たいメンツが少なかったこともあり断念しましたが、

SONIC MANIAではサカナクション、UNDERWORLDなどを堪能しました。

さて今回のブログは、Google Map APIを使用した経路検索について書いてみます。

Google Maps APIで経路検索をする方法

Google Maps APIのMaps JavaScript APIを使用して、複数地点間の経路検索を実装する方法です。

具体的にはグーグルマップに動的にピンを追加し、経路検索の結果を表示します。

前提条件

Google Cloudのプロジェクトで以下のAPIを有効にしておく。

・Maps JavaScript API

・Directions API

1. 初期設定

地図の初期設定は公式のサンプルに倣ってinitMap関数で行います。

Google Maps APIのMapオブジェクトを初期化し、地図の中心・DirectionsService・DirectionsRendererの設定を行います。

2. マーカー（ピン）の追加と管理

地図上に経由地を示すピンを追加し、ピンをクリックした時の動作もセットしておきます。

3. 経路情報の表示

選択したピン間の経路を表示するために、Google Maps APIのDirectionsServiceを利用して経路情報を取得し、DirectionsRendererを使って地図上に経路を描画します。

まとめ

Google Maps APIとDirectionsServiceを用いることで、地図上にピンを追加し地点間の経路を表示する機能を簡単に実装することができました。

某プロジェクトで作業スケジュールを組む時に移動時間・ルートを知りたいという要望で実装した機能ですが、さまざまな用途で活用できそうだなと思いました。

The post Google Maps APIで経路検索をする方法 first appeared on 株式会社yep.