Define marker clusterer's renderer in a slot

[DamianGlowala]

🆒 Your use case

Currently, in order to customize the looks of a given cluster, we need to write a pure JS solution with cluster's HTML structure written in plain text. As an example:

const markerClustererOptions: {
    algorithm: MarkerClustererOptions['algorithm']
    renderer: MarkerClustererOptions['renderer']
} = {
    algorithm: new SuperClusterViewportAlgorithm({ radius: 140, maxZoom: 13 }),
    renderer: {
        render: (cluster, stats) => {
            const svg = `
                <svg> here goes dynamic SVG shape based on the cluster var </svg>
            `

            const content = document.createElement('div')

            content.innerHTML = `
                <img 
                    src="data:image/svg+xml;base64,${window.btoa(svg)}" 
                    width="50" 
                    height="50"
                    style="display: block;"
                />

                <div
                    style="
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        color: #fff;
                        font-size: 12px;
                        text-align: center;
                        pointer-events: none;
                        user-select: none;
                    "
                >
                    ${cluster.count}
                </div>
            `

            const marker = new google.maps.marker.AdvancedMarkerElement({
                position: cluster.position,
                content,
            })

            return marker
        },
    },
}

🆕 The solution you'd like

Adding a slot named renderer with exposed data from the render fn (type def: render(cluster: Cluster, stats: ClusterStats, map: google.maps.Map): Marker;).

I think we could omit exposing map variable if (I'm not sure) it is already exposed higher up in the tree?

<ScriptGoogleMapsMarkerClusterer :options="...">
  <template #renderer="{ cluster, stats }">
    <ScriptGoogleMapsMarker>
      ...
    </ScriptGoogleMapsMarker>
  </template>
</ScriptGoogleMapsMarkerClusterer>

🔍 Alternatives you've considered

No response

ℹ️ Additional info

No response