googlemapsAPIを使用してクラスターを表示しています。
クラスターをクリックした時に、アイコンを変更したいのですが変わりません。
下記を参考にしています。
https://googlemaps.github.io/v3-utility-library/classes/_google_markerclustererplus.markerclusterer.html#setimagepath
clusterMarker.getImagePath()
で、/orange.svg
の取得はできており
clusterMarker.setImagePath("/red.svg");
すると、オブジェクトは/red.svg
に変更されていますが地図上のアイコンには反映されません。
よろしくお願いいたします。
// 単一マーカー
singleMarkersList = markerList.map((marker, i) => {
const singleMarker = new google.maps.Marker({
position: marker.position,
info: marker.info,
icon: createSingleMarker("orange")
})
// 単一マーカークリックイベント付与
singleMarker.addListener("click", (e) => {
togglearkerImage(singleMarker);
showMarkerInfo([singleMarker]);
});
return singleMarker
});
// クラスターマーカー
clusterMarker = new MarkerClusterer(map, singleMarkersList, {
imageExtension: "svg",
// クラスタークリック時にzoomさせない
zoomOnClick: false,
styles: [{
url: "/orange.svg",
}]
});
// クラスターアイコンクリック時イベント付与
google.maps.event.addListener(clusterMarker, "clusterclick", (cluster) => {
clusterMarker.setImagePath("/red.svg");
});