GoogleMapAPIでMarkerClustererを利用した時のマーカークリックについて

Question

#####現状のコード
https://jsfiddle.net/Jq7LxKdg/htf33xoz/3/

#####説明
MarkerClustererを利用して同一の緯度・軽度の場合はまとめることはできました。
最終的には、以下のように数字アイコンをクリックした時にその数字アイコンに紐づくコンテンツを表示したいです。
調べたのですが、情報に辿り着けず、、、実装方法がイメージでないです。

何か良い方法はないでしょうか？

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

Answer 1

https://jsfiddle.net/htf33xoz/8/

変更した点はこちら。

Yucho.jsonData.jsonDataList.forEach(function (place,i) {
			var latlng = new google.maps.LatLng(place.lat,place.lng);
			var marker = new google.maps.Marker({
				position: latlng,
				map: Yucho.map,
				flat: true,
				title: String(i),
			});
			Yucho.markerArr.push(marker);
	
//...
});

// MarkerClusterer ライブラリの実行し、クラスタリングします
var markerCluster = new MarkerClusterer(Yucho.map, Yucho.markerArr, {imagePath: 'https://googlemaps.github.io/js-marker-clusterer/images/m',    zoomOnClick:false,});

追加したのがこちら

google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
	console.log(cluster);
	cluster.markers_.forEach(function(e){
		console.log(e.title);
	});
});

簡単に解説しますと、オプションのzoomOnClickを偽にすると、クリックした時のズーム動作をなくします。
そして、clusterclickというカスタムイベントがあるのでそれを拾い、コールバックで渡されるクラスタオブジェクトのmarkers_プロパティがそのクラスタに含まれるマーカー配列を持っています。
あとは、マーカーオブジェクトに色々持たせれば色々できるんじゃないかと。

Comments

[ssk]

助かりました＞＜ありがとうございます。
実装することができました。

最後に、、、
idleした時にマーカーは削除（リセット）できるのですが、MarkerClustererをリレットする場合はどこにどのように記述すれば良いでしょうか？

以下の参考URLのようにすると表示されなくなってしまいます。
http://stackoverflow.com/questions/4060241/how-to-show-hide-a-markercluster-in-google-maps-v3

現状
idleすると数字アイコン（MarkerClusterer）が二重で表示されてしまいます。

[ssk]

↑上記のコメントは無視してください。削除リクエストしています。

空のオブジェクトmarkerClusterer:{}を用意

Yucho.refleshMapの関数の中で
//クラスタラーの削除
if(Yucho.markerClusterer && Array.isArray(Yucho.markerClusterer.markers_)){
Yucho.markerClusterer.clearMarkers();
}
とするとクラスターの削除ができました。
他に良い判定方法がありましたら、教えていただけると助かります。

MarkerClustererの前にYucho.markerArr.push(marker);としているため
idleした時にmarkerが一瞬表示されてしまいます、、

[Lhankor_Mhy]

そもそもMarkerClustererを使っているならマーカーの再描画はしないように調整すべきかと思います。
もしどうしても再描画したいならredraw()でいいかと思います。

[ssk]

ありがとうございます。
再描画をしているpushを調整して実現いたします。

とても助かりました＞＜