Google MapsのMarkerClustererのアイコン

Question

Google mapsのMarkerClustererについてです。

ある条件で地図にプロットしたピンをまとめて表示してくれますが、この範囲はピクセル指定ですか？

また、数によってアイコンの色が変わります。
9以下だと青、10～99だと黄色、100以上だと赤になります。

まだもっと増えると紫とかに変わると思うのですが、この『◯個～◯個で何色』という事を詳しく書いてあるページ等、ありましたら教えて下さい。

自分で変更するならどう記述するかも
合わせて教えていただけると幸いです！

よろしくお願いいたします。

Answer 1

この範囲はピクセル指定ですか？

【MarkerClusterer for Google Maps v3 version 1.0 Reference】
https://googlemaps.github.io/js-marker-clusterer/docs/reference.html

Name Type Description
gridSize number The grid size of a cluster in pixels.

とあるのでピクセルでしょう。

---

9以下だと青、10～99だと黄色、100以上だと赤になります。

minimumClusterSize オプションでスタートの数は変更可能だと思います。多分ですが、1,10,100,1000と、桁数が変わったら変わるのではないでしょうか。

【js-marker-clusterer/markerclusterer.js at gh-pages · googlemaps/js-marker-clusterer · GitHub】
https://github.com/googlemaps/js-marker-clusterer/blob/gh-pages/src/markerclusterer.js#L357

---

自分で変更するならどう記述するかも

計算式を追加（差し替え）することができます。どう変更したいのかによるので、リンク先のコードからできることを参考にしてください。

【javascript - modifying MarkerClusterer icons for top score, rather than marker count - Stack Overflow】
http://stackoverflow.com/questions/12783250/modifying-markerclusterer-icons-for-top-score-rather-than-marker-count

【Marker Cluster Calculator for Google Maps v3 - Front-End Web Developer, Oxfordshire, UK - Matt Hobbs】
https://nooshu.github.io/blog/2012/10/03/marker-cluster-calculator-for-google-maps-v3/

Comments

[a802]

ありがとうございます！

追加質問で恐縮ですが、
100000件以上になった場合はどうなるか分かりますか？

[kei344]

赤青黄など何種類用意されているかわかりませんが、用意されているものの数の次の桁の場合用意されているものの最後が優先されるようになっています。
index = Math.min(index, numStyles);
の部分です。コードを読めばわかると思いますよ。

https://googlemaps.github.io/js-marker-clusterer/examples/advanced_example.html
自分でアイコンを作ったり登録したりすることもできるので、ステップ数を変更することも出来ます。