Как в классе MarkerClusterer Google Maps API V3 создать несколько стилей для MarkerClusters на основе уровня масштабирования?

async function initMap() {

  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const center = {
    lat: 0,
    lng: 0
  };

  const map = new Map(document.getElementById("map"), {
    center: center,
    zoom: 2,
    mapId: "4504f8b37365c3d0",
    zoomControl: true
  });

  const markers = [];

  // Define the max latitude on a mercator projection
  var maxLat = Math.atan(Math.sinh(Math.PI)) * 180 / Math.PI;

  // Loop and create many markers
  for (let i = 0; i < 2000; i++) {

    // Calculate a random lat and lng
    const lat = Math.floor(Math.random() * (maxLat * 2)) - maxLat;
    const lng = Math.floor(Math.random() * 360) - 180;

    const marker = new AdvancedMarkerElement({
      map: map,
      position: new google.maps.LatLng(lat, lng),
      title: "AdvancedMarkerElement"
    });

    markers.push(marker);
  }

  let algorithm = new markerClusterer.SuperClusterAlgorithm({
    maxZoom: 15
  });

  // Marker clusterer
  const cluster = new markerClusterer.MarkerClusterer({
    map: map,
    markers: markers,
    algorithm: algorithm,
    renderer: {
      render: ({
        count,
        position
      }, stats, map) => {

        // Create a custom cluster HTML element to be used with an AdvancedMarker
        const el = document.createElement("div");

        // Change appearance based on current zoom
        el.className = map.getZoom() > 2 ? 'cluster red' : 'cluster';
        
        // Set content
        el.textContent = String(count);
     
        // Return AdvancedMarkerElement
        return new AdvancedMarkerElement({
          position: position,
          content: el,
          title: "AdvancedMarkerElement Cluster"
        });
      }
    }
  });
}

initMap();

#map {
  height: 180px;
}

.cluster {
  font-size: 1.5em;
  background-color: yellow;
  padding: .25em .5em;
  transform: rotate(5deg);
}

.red {
  color: white;
  font-size: 2em;
  font-weight: bold;
  background-color: red;
  transform: rotate(-5deg);
}

<div id = "map"></div>
<script src = "https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>

<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p = "The Google Maps JavaScript API",c = "google",l = "importLibrary",q = "__ib__",m=document,b=window;b=b[c]||(b[c] = {});var d=b.maps||(b.maps = {}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk", v: "beta"});</script>