GoogleMapAPI、同じ緯度経度をもつオブジェクトを１つのマーカーで表示させる方法

Question

前提・実現したいこと

<前提と問題>
プログラミングを勉強し始めて5ヶ月が経ちました。
勉強を兼ねてRailsでアプリケーションを制作中です。
ユーザが作成したテニスコートオブジェクトをマーカーで地図上に表示させる機能を作っています。
マーカーをクリックすると吹き出しでコート名を表示するようにしました。
しかし緯度経度が同じコートを表示させる時にマーカーが被ってしまいます。

<実現したいこと>
・マーカーにそこで開催されるイベントの数を表示したい。
・そのマーカーをクリックした時に重なっているイベントの名前などを吹き出しに表示させたい

該当のソースコード

document.addEventListener( 'DOMContentLoaded', function() {
var map;
var marker = [];
var infoWindow = [];
var test = gon.courts;　//コントローラからコート情報を配列として引っ張ってきてます。

  //マップの生成
  var mapLatLng = new google.maps.LatLng({lat: test[0]['latitude'], lng: test[0]['longitude']});
  map = new google.maps.Map(document.getElementById('Map'), {
    center: mapLatLng,
    zoom: 10
  });

  // マーカーの生成
  for (var i = 0; i < test.length; i++) {
    markerLatLng = new google.maps.LatLng({lat: test[i]['latitude'], lng: test[i]['longitude']});
    marker[i] = new google.maps.Marker({
      position: markerLatLng,
      map: map
    });
    
    //コンテンツの生成
    contentString = '<a href="https://www.google.com/maps/place/'+test[i]['latitude']+','+test[i]['longitude']+'">googleMapで見る</a>'+
                        '<div>'+test[i]['name']+'</div>'

    //infowindowの生成
    infoWindow[i] = new google.maps.InfoWindow({
      content: contentString
    });
   
    markerEvent(i); // マーカーにクリックイベントを追加
  }

  //マーカークリックで吹き出し表示
  function markerEvent(i) {
    marker[i].addListener('click', function() { 
      infoWindow[i].open(map, marker[i]);
    });
  }

  //コート情報クリックで地図遷移
  $('li.court-info').on('click',function(){
    var index = $('li.court-info').index(this);
    lat = test[index]['latitude']
    lng = test[index]['longitude']
    move(lat,lng);
  });

  //move関数
  function move(lat,lng) {
    map.panTo(new google.maps.LatLng(lat,lng));
  }
});

試したこと

考えた方法

マーカーオブジェクトを作る
↓
marker配列の要素と比較する
↓重複していなければ　　　　　　　↓重複していた場合
marker配列に保存する　　　　　　重複したイベントのnameプロパティをinfowindowオブジェクトに追加する

考えてみたものの、実装方法が本当に思いつかず半日経ってしまいました。
自分のセンスの無さに悲しくなりました。
何か良い方法はありますでしょうか？

Answer 1

maisumakunさんが紹介している公式ページにMarkerClusterというGitHubに公開されているライブラリへのリンクが紹介されています。
このライブラリのgridSizeオプションに0を指定した場合、全く同じ緯度軽度のもののみクラスタリングされるようになります。
gridSizeとはクラスタリングでマーカーを結合する正方形範囲(単位はpx)のことで、デフォルトでは60pxになります。

吹き出し表示はクラスター用にもう一つ作成したら出来るかと思います

Comments

[退会済みユーザー]

返信遅くなり申し訳ございません。
参考にさせて頂きます。
ありがとうございました。

Answer 2

Google公式で、Marker Clustererというライブラリが紹介されています。

Comments

[退会済みユーザー]

maisumakunさん
回答ありがとうございます。
Marker Clusterer　一度調べましたが、今回の問題は解決できないのかなと感じました。
マーカーが密集している場合には有効だと思うんですが、全く同じ緯度経度の場合も適応できるものでしょうか？　ご教授くださいませ。

今回実現したいこと
・マーカーの緯度経度が同じ時にマーカーに数字を表示させる
・吹き出しに同じ緯度経度をもつコートの情報を複数載せる