Google Maps API: MarkerClustererのアイコンスタイルをカスタマイズする方法

Google Maps Marker Clustererのアイコンをカスタマイズしたかったのだが、書き方が大幅に変わっていたのでメモ

markerClusterer 該当コード

MarkerClustererのコード

参考: https://stackoverflow.com/questions/7834284/styling-markerclusterer-icons

<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js">
const renderer = {
            render: ({ count, position }) =>
                new google.maps.Marker({
                    icon: { url:"IMGURL" }, 
                    label: { text: String(count), color: "white", fontSize: "10px" },
                    position,
                    // adjust zIndex to be above other markers
                    zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
            }),
            };
const markerCluster = new markerClusterer.MarkerClusterer({ 
                map, 
                markers,
                renderer,
            });

MarkerClustererPlusのコード

MarkerClustererPlusは非推奨らしい。ややこしい。
https://www.npmjs.com/package/@googlemaps/markerclustererplus

<script src="https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js">
new MarkerClusterer(
  map,
  markers,
  {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
  },
);

導入

ここでは触れない。

JavaScriptでGoogle MapとMarkerClustererを使用してマーカーをまとめて表示する