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

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

どうもfujiharaです。
あと2ヶ月で今年も終わりですね。早いものです。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 に与える値は まとめ表示の時に使う画像の頭につくものです。 最大で5種類使うので、この場合 /path/m1.png ~ /path/m5.png になります。imagePath ではなく styleプロパティを当てるとCSSのスタイルで 設定もできます。 {style: [{fontSize: '10px', ...}]} 慣れないですが、このような形です。

まとめ

どうでしたでしょうか。簡単な説明で申し訳ないのですが、長く説明するのが難しいほど簡単です。 詳しい説明は本家サイトに乗っていますので、是非お試しください。
マーカー クラスタリング

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ