googlemap clusterでピンのまとめ表示を実践してみました

大量プロットする際はクラスター表示する事も検討するといいと思います〜

tree-mapsを開発していて、最近google map clusterによるまとめ表示機能に対応しました。

解り難いかもしれないので、clusterが実際どんな表示になるのか、見てましょう。

マーカー クラスタリング  |  Google Maps JavaScript API  |  Google Developers

通常のピン表示

（；＾ω＾)＜何これキモっ！

あまりにも沢山のピンを表示すると、こうなってしまいます・・・キモすぎですね・・・
もうどこにどれくらいピンがあるのか解らんです。
これを解消するのが、Google map clusterです。

クラスター表示

（　＾ω＾)＜おー、これはいいな！

こんな感じで前述の無数のキモいピン地獄から、ちゃんと地図が見えるようになりました。

tree-mapsではこのピンとクラスター表示を切り替えるインターフェースを用意しました。
座標の件数に応じて使い分けるとよいと思います。

実際のクラスター表示を試してみたい方は、私が作成しているtree-mapsをご覧下さい。

1000件お試しプロットする機能も用意しているので、ピン表示とクラスター表示の違いを体感できます。

速度の違い

ピン表示の場合は、描画が終わるまでが遅いが、操作を受け付けるまでが速い。
クラスター表示の場合は、描画が非同期で継続して行われるっぽく、徐々にポツポツとクラスター部分が描画されていきます。故に、中々高速に動作します。

挙動

どこまでをクラスターの範囲にするかを設定できて、ピクセルでまとめる範囲を指定します。
更に、クラスター部分にどの座標が含まれるかも取得できるので、クラスター部分をクリックした時にサイドバーに緯度経度一覧のようなものを表示することもできます。

具体的なアプリを使う事を想定すると、

• クラスターをクリック
• クラスターから緯度経度一覧を取得
• 緯度経度をキーにデータを取得
• データの一覧を一覧表示

等でしょうか。緯度経度をキーにする部分の改善は可能だと思います。

スタイル

styleオプションでスタイルを変更可能です。
初期の挙動して、1000件以上だと色と大きさが変わる、等があるのですが、
そこまでカスタマイズできるかまでは調査できてません。

雑感

世間でGoogle map clusterがあまり使われてない気がします。
「細かいカスタマイズができないんじゃない？」など、所謂「要件を満たせない可能性」を考慮して、不採用となるケースがあるかもしれません。しかしクラスター表示を自前で実装するのはかなり手間がかかるし、速度的な不満もでるかもしれません。そんな冒険をするくらいなら、google map clusterを使った方が時間もかからず速度も速いので、使えるなら使った方がいいのではないかと思います。

Google Maps APIプログラミング入門 改訂2版

グーグルマップ Googleマップ 完全活用術 仕事の効率を上げる無料地図サービスの活用ワザ

GPS搭載 GoogleMAP連動 2.7型ディアルレンズドライブレコーダー