読者です 読者をやめる 読者になる 読者になる

文系プログラマによるTIPSブログ

文系プログラマ脳の私が開発現場で学んだ事やプログラミングのTIPSをまとめています。

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

jquery googlemap

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

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

Too Many Markers! - Google Maps API — Google Developers

通常のピン表示

f:id:treeapps:20140330234804p:plain

(;^ω^)<何これキモっ!

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

クラスター表示

f:id:treeapps:20140330234815p:plain

( ^ω^)<おー、これはいいな!

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

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

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

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

速度の違い

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

挙動

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

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

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

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

スタイル

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

雑感

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

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

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