Google Mapsが新プランになったから、Leafletを試してみた

のえる のえる 2019.01.07

新年あけましておめでとうございます。

 

昨年、2018年はGoogle Mapsの料金体系が大きく変更された年でした。
そのため、各Webページを見ていると、「Googleマップが正しく読み込まれませんでした」というエラーが出ているサイトをよく見かけます。

 

この原因は複数ありますが、大きく分けると下記の3点となります。

 

  • APIキーを利用していない場合
  • APIキーを利用しているが、無償枠を超えた場合
  • 請求先アカウントの登録がされていない

 

特に3つ目が曲者でして、「無料超過分のAPI使用数を超えると従量課金される」という点が非常に厄介です。
(詳しい料金・API使用回数等は コチラ をご覧ください)

 

Google Mapsとほぼ等価の機能が使えて、でもお金はかけたくない!!

 

そんなワガママな願いを叶える素敵なライブラリがあるので紹介します。

Leaflet とは

Leafletとは、オープンソースのJavascript地図ライブラリです。
このライブラリの特徴は「モバイル向け対応済み」「シンプルで軽量」「機能をプラグインで追加できる」という点です。

 

特に「機能をプラグインで追加」という点が優秀で、かなり多くのプラグインが存在しています。
ただ逆に、プラグインを入れないと、必要最低限の機能しかないという点も注意です。

Leafletをインストールする

まずはLeaflet1をインストール(ダウンロード)しましょう。

 

ダウンロードは コチラ です。
※記事執筆時点での最新バージョンは v1.4.0 です

 

ダウンロードが完了したら、「leaflet.js」「leaflet.css」「images」をHTMLファイルで読み込みます。
(imagesは leaflet.css と同一階層に配置します)

 

必要ファイルはこれで終了です。

Leafletを表示する

それではLeafletでいろいろ表示してみましょう。

地図を表示

下記のようにすることで地図を表示できます。

ズームコントロールを変更

デフォルトのズームコントロールは左上に固定され、さらにマウスオーバー時のテキストは英語です。
不都合な場合もあるかとおもいますので、変更してみます。

マーカーを表示

地図の基本となるマーカーを表示します。
また、マーカークリックでのポップアップ表示や、初めからポップアップを出しておく方法もこちらに記載します。

ポップアップを表示

地図にポップアップのテキストのみを表示したい場合にはこちらを使用します。

マップをクリックした位置を取得 / 移動する

マップをクリックした位置の緯度・軽度を取得したり、その場所へ中心を移動する方法は下記のとおりです。

地図に円を描く

地図上で範囲を指定する場合などで使用する、円を描く方法は下記のとおりです。

カスタムマーカーを表示する

独自のマーカーを表示する場合は下記のとおりです。
(今回使用したカスタムアイコンは 100×100 のpng画像です)

さいごに

無事に地図は表示されましたか?
その他、プラグインについては需要があれば記載していこうかと思いますので、今回はここまで!

POPULAR

のえる

書いた人

のえる

Full-stack Developer / Motorcycle Enthusiast / Guitarist