MarkerClustererによってクラスタ化したマーカーの情報ウィンドウを表示したい

Question

MarkerClustererによってクラスタ化したマーカーをタップ又はマウスオーバーにした場合に、情報ウィンドウを表示するようにしたいのですが、方法がわからないため、アドバイスを頂けると大変助かります。

現状のコードは、以下の通りです。

var lat,lng;

var map = new google.maps.Map(
document.getElementById("gmaps"),{
zoom : 10,
center : new google.maps.LatLng(lat, lng),
mapTypeId : google.maps.MapTypeId.ROADMAP,
clickableIcons: false
}
);
// マーカーを生成
var markers = new Array();
function is_touch_enabled() {
	return ( 'ontouchstart' in window ) ||
		( navigator.maxTouchPoints > 0 ) ||
		( navigator.msMaxTouchPoints > 0 );
}
if( is_touch_enabled() ) {var act ="click";}else {var act ="mouseover";}
for(let i=0; i<data.length; i++){
	var lat = data[i].lat;
	var lng = data[i].lng;
	markers[i] = new google.maps.Marker({
		position: new google.maps.LatLng(lat, lng),
		map: map
	});
    var latlng = new google.maps.LatLng(lat,lng);
    var infoWindow = new google.maps.InfoWindow();{
        google.maps.event.addListener(markers[i], act, function() {
            infoWindow.setContent('<h3><a href="'+data[i].url+'">'+data[i].title+'</a></h3><p>'+data[i].address+'</p><p><a href="tel:'+data[i].tel+'">'+data[i].tel+'</a></p><p>数:'+data[i].kazu+'名</p><p>取扱い:'+data[i].toriatukai+'</p>');
            infoWindow.open(map,markers[i]);
        });
    }
}
// 範囲内に収める
var minX = markers[0].getPosition().lng();
var minY = markers[0].getPosition().lat();
var maxX = markers[0].getPosition().lng();
var maxY = markers[0].getPosition().lat();
for(var i=0; i<data.length; i++){
	var lt = markers[i].getPosition().lat();
	var lg = markers[i].getPosition().lng();
	if (lg <= minX){ minX = lg; } if (lg > maxX){ maxX = lg; }
	if (lt <= minY){ minY = lt; } if (lt > maxY){ maxY = lt; }
}
var sw = new google.maps.LatLng(maxY, minX);
var ne = new google.maps.LatLng(minY, maxX);
var bounds = new google.maps.LatLngBounds(sw, ne);
map.fitBounds(bounds);
var listener = google.maps.event.addListener(map, "idle", function() { 
  if (map.getZoom() > 17) map.setZoom(17); 
  google.maps.event.removeListener(listener); 
});
const markerClusterer = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

Comments

[Lhankor_Mhy]

質問一覧を拝見しましたが、ほとんどの質問が放置されているようです。

意図してフリーライダーをしているのであるならともかく、自覚がないのでしたら、質問を解決するようにされてはいかがでしょうか。

Answer 1

markerclustererplus の方であれば、マウスイベントのサンプルがありました（コード）。

@googlemaps/js-markerclustererplus

Comments

[michir]

お陰様で、無事に解決できました。
大変助かりました。
誠にありがとうございました。