I am updating my Google Maps code due to the deprecation warning: “As of February 21st, 2024, google.maps.Marker is deprecated. Please use google.maps.marker.AdvancedMarkerElement instead.”

I’ve successfully replaced new google.maps.Marker with new google.maps.marker.AdvancedMarkerElement for individual markers, and everything works fine. However, when I try to update the renderer function inside my MarkerClusterer, I get an error:

Uncaught InvalidValueError at _.Jj

This error occurs when I change new google.maps.Marker to new google.maps.marker.AdvancedMarkerElement inside the render function for marker clustering.

Here is the relevant part of the code:

const renderer = {
    render({ count, position }) {
        const clusterIcon = getClusterIcon(count);

        // Changing this from google.maps.Marker to google.maps.marker.AdvancedMarkerElement causes the error
        return new google.maps.marker.AdvancedMarkerElement({
            label: { text: String(count), color: "white", fontSize: clusterIcon.fontSize },
            position,
            icon: clusterIcon,
            zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
        });
    }
};

I expect the clusters to render with the AdvancedMarkerElement as they did with google.maps.Marker. What is the proper way to update the renderer in MarkerClusterer with the new AdvancedMarkerElement?