Google Map Apiで地図にデータを配置する初歩的なメモ

1. はじめに

GoogleMapApiを用いたコードは何度か書いた事があるのですが、毎回細かい点を検索して調べなおしていたので簡単にまとめてメモします。

データのヒートマップ表示

ここで紹介するサンプルコードはAPIキーを含んでいません。これは非推奨の使い方なので実際に使用する場合はAPIキーを取得して使用したほうがよさそうです。GoogleMapAPIの仕様するにはGoogleの使用許諾に同意する必要があります。

---

2. まずは地図だけを表示する

ただ地図を表示するだけです。拡大率と中心緯度経度を指定しています。

【Google API読み込み時のURLオプションパラメーター】

sensor(必須): true/false (端末のGPSセンサーを使うか否か)

language: ja (ラベルで使用する言語)

libraries: visualization など(ヒートマップを重ねるなどの処理をする場合に指定**後述**)

デモを表示する

---

3. 続いて単純なピンを打つ

地図上に既定アイコンのピンを打ちます。ピンをクリックすると吹き出しを表示します。

（コードの説明はソースのコメントを参照してください）

デモを表示する

---

4. ピンのかわりにサークルを配置する

ピンだといかにもGoogleMapな雰囲気なので、カラーサークルをデータ位置に配置します。また、データ中の値を使用してサークルの大きさを変更して配置します。

デモを表示する

---

5. ピンのかわりにヒートマップを配置する

データが密集している場合などはサークルだと重なりが多くなって分かりづらくなってしまいます。こんな時はヒートマップを配置します。正確にはヒートマップ用のレイヤーを作成してGoogleMapへ重ねます。

デモを表示する