Google Map と MarkerClusterer でまとめ表示 ( JavaScript)

JavaScript

2017.10.31

どうもfujiharaです。
あと２ヶ月で今年も終わりですね。早いものです。Google Map のピンをまとめて表示できる MarkerCluster ライブラリをご紹介します。
先に言っておきます。マジ簡単に導入できます。

きっかけ

見つけたきっかけは　GoogleMap JavaScript Api を使ってマーカーを表示した場合マーカーの座標同士が近い場合にはマーカーがかぶり、わかりにくくなります。また、とある案件で各マーカーがユーザさんを表していたのですが、ユーザの納得できないマーカー表示（マーカーが重なって)がされて問題でした。

MarkerCluster

そこで発見したのがMarkerClusterでした。これはズームをのレベルでゾーンを自動で作ってくれて、そのゾーン内に入っているマーカーをまとめて表示してくれる優れものです。これを使えば不都合なマーカーの表示がなくなってくれます。
(デメリットとしては複数表示を展開する場合のクリック数が増えるという点はあります。)

実装

今回は簡単なマップの導入は省略させてもらいます。
通常だとMarker を作成する場合は以下になると思います。ライブラリの読み込みは Google Map Api を読み込む前に


new google.maps.Marker({
  position: [lat, lng],
  map: mapインスタンス,
  label: 'label_name'
});

MarkerCluster で表示する場合は map の指定を一旦外します。そしてマーカのインスタンスを配列にいれます。


var locations = [[lat1, lng1], [lat2, lng2]... ];
var markers = locations.map(function(i, location) {
  return new google.maps.Marker({
    position: {lat: location[0], lng: location[1]},
    //map: mapインスタンス, //必要なし
    label: 'label_name' + i
  });
});

そして最後にマーカーの配列をMarkerClusterに渡します。


new MarkerClusterer(
  map,
  markers,
  {imagePath: 'クラスタ表示されたマーカの画像へのディレクトリパス/m'}
);

これで簡単にまとめ表示ができてしまいます。注意点ですが、上記のimagePath に与える値はまとめ表示の時に使う画像の頭につくものです。最大で５種類使うので、この場合 /path/m1.png ~ /path/m5.png になります。imagePath ではなく styleプロパティを当てるとCSSのスタイルで設定もできます。 {style: [{fontSize: '10px', ...}]} 慣れないですが、このような形です。