ウェブの技術とか開発環境構築の覚書。
2016年の6月からGoogleMapsAPIのサービスが、APIキー必須になったため
無料とはいえ、地図を設置するＷEBサイトを登録することが必須になりました。
そこで、代わりというには少し毛色が違うかもしれませんが
ルート検索などの機能はついていないものの、登録なしで自由にさわられる地図表示の仕組みとして
JavaScriptライブラリLeaflet.jsを使い、国土地理院が無料で公開している地理院地図のタイルデータを表示するサンプルを紹介します。
See the Pen Leaflet.jsで国土地理院地図を表示 by webdev (@webdev-jp-net) on CodePen.0
スタート地点、ゴール地点、移動手段を指定すると、GoogleMapsAPIの地図上へルート表示できます。
GoogleMapsはデフォルトで最短ルートの道筋をマーキングしてくれるので、
クライアントワークで最寄り駅から目的地までのルートをGoogleMapsで設置するとき、かなり細い路地や、飲み屋街の真ん中を突っ切る表示になってしまうことがあります。
そんなとき応用が効くよう、経由ポイントを設定して道順をカスタマイズする方法もあわせてご紹介します。
GoogleMapsAPIの地図へピンを追加する方法です。
GoogleMapsAPIで地図を表示する方法です。