

googlemapsAPIを使用してクラスターを表示しています。  
クラスターをクリックした時に、アイコンを変更したいのですが変わりません。  
下記を参考にしています。  
<https://googlemaps.github.io/v3-utility-
library/classes/_google_markerclustererplus.markerclusterer.html#setimagepath>  
`clusterMarker.getImagePath()`で、`/orange.svg`の取得はできており  
`clusterMarker.setImagePath("/red.svg");`すると、オブジェクトは`/red.svg`に変更されていますが地図上のアイコンには反映されません。

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

[code]

    // 単一マーカー
    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");
    });
    
[/code]


CC BY-SA 4.0
2020-12-09T10:13:03.327
72534
2021-02-12T10:24:55.487
2020-12-09T10:24:21.007
32986
16768
question
javascript google-maps
クラスター アイコンをクリックイベントで変更したい


自己解決メモ

[code]

    // クラスタのstyle定義
    const clusterMarkerOptions = {
        imageExtension: "svg",
        styles:  [{
          url: "icon-red.svg",
        }, {
          url: "icon-orange.svg",
        },
    }
    
        // 単一マーカー
    singleMarkersList = markerList.map((marker, i) => {
        const singleMarker = new google.maps.Marker({
        position: marker.position,
        })
    
        return singleMarker
    });
    
        // クラスターマーカー描画
        clusterMarker = new MarkerClusterer(map, singleMarkersList,　clusterMarkerOptions);
        clusterMarker.setCalculator({
                text: "クラスターラベルtext", 
                // icon-red.svgが表示
                index: 1
          });
      
    
     // クラスターアイコンクリック時イベント付与
        google.maps.event.addListener(clusterMarker, "clusterclick", () => {
          clusterMarker.setCalculator({
                text: "クラスターラベルtext", 
                // icon-red.svgが表示
                index: 2
          });
        clusterMarker.redraw_();
        });
    
    
[/code]


CC BY-SA 4.0
2021-02-12T10:24:55.487
73953
2021-02-12T10:24:55.487
16768
72534
answer