Google Maps を Angular.js から使う

Angular.js に Google Maps を組み込んだ。Google Maps JavaScript API は、とてもシンプルで使いやすいAPI だった。このAPI にはいくつかのバージョンがあり、この記事を書いている時点では v3 が最新だが、ネット上にある how to のほとんどは、古い v2 が対象になっている。

今回は、地図を呼び出すコードを Angular.js のディレクティブにして汎用的に使えるようにした。また、簡易的な座標ピッカーも作った。

API Keyの準備

まずは Google Maps JavaScript API の Getting Started を参考にして進めてみる。

https://developers.google.com/maps/documentation/javascript/tutorial?hl=ja

手順はシンプルである。おなじみ Google Developers Console で API Key を取得し、JavaScript を呼び出すだけだ。 これで、JavaScript 上で google.maps オブジェクトを利用できるようになる。

サンプルがけっこう豊富

サンプルがけっこう豊富に用意されているので、やりたいことがサンプルにあれば、簡単に実現できるだろう。

https://developers.google.com/maps/documentation/javascript/examples/?hl=ja

Angular.js にディレクティブを作る

Google Maps JavaScript API では、DOMというかHTMLはほぼ記述不要だ。パラメータで与えられた座標をもとに地図を表示する簡単なディレクティブを作った。

ディレクティブの宣言どおりに、下記のように呼び出す。

<div map="" lat="data.lat" lon="data.lon" style="width: 100%; height: 500px;"></div>  

とりあえず地図が表示されるようになった。

ここから改造していくことで、座標ピッカーも簡単に作ることができた。API で指定座標にピンを立てたり、中心座標を取得したりするのだ。ジオコーディングAPI (地名を座標に変換する)を使えば、さらに便利にできる。

制限

Google Maps API にはいくつかの制限がある。
無料で利用するには、だれでも自由に無料でアクセスできるページである必要がある。 また、一日あたりのAPI呼び出し回数に制限があるので注意が必要。