Change default marker color to purple, but must use custom marker clustering using Google map api javascript

Question

I am using https://maps.google.com/maps/api/js?key=xxxxxx&libraries=drawing,places,marker&async=2&callback=MapPropertyShopLoaded for google maps

and https://unpkg.com/@googlemaps/[email protected]/dist/index.min.js for marker clustering

I create the markers and clustering using the below code

marker = new google.maps.Marker({
            position: new google.maps.LatLng(locationObject.Latitude, locationObject.Longitude),
            map: map,
          
            title: hotelName,
            id: hotelid
        });

 var renderer = {

    render: function (paramss)
    {
     return   new google.maps.Marker({
         label: { text: String(paramss.count), color: "white", fontSize: "10px" },
         position: paramss.position,
            // adjust zIndex to be above other markers
         zIndex: Number(google.maps.Marker.MAX_ZINDEX) +paramss.count
        });

    }
};
 markClusterobj = new markerClusterer.MarkerClusterer({ map: map, markers: markers, renderer: renderer});

I love the way with clustering works by putting how many markers are beneath it. I have been asked to make all markers a purple color now. I want the marker to be look and feel identical to the red one only purple. I have tried AdvancedMarkerView but It does not support clustering. I have tried to download images and they come out low quality and odd. Any idea how I can achieve the above only in purple?

Answer 1

Decided to use my own custom image to show the marker color. using seticon Also changed the marker cluster to a different image using

 var svg = window.btoa('<svg fill="#A020F0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240"><circle cx="120" cy="120" opacity=".6" r="70" /><circle cx="120" cy="120" opacity=".3" r="90" /><circle cx="120" cy="120" opacity=".2" r="110" /><circle cx="120" cy="120" opacity=".1" r="130" /></svg>');
var renderer = {

    render: function (paramss)
    {
     //return   new google.maps.Marker({
     //    label: { text: String(paramss.count), color: "white", fontSize: "10px" },
     //    position: paramss.position,
     //    icon: "https://googlemaps.github.io/js-marker-clusterer/images/m5.png",
     //       // adjust zIndex to be above other markers
     //    zIndex: Number(google.maps.Marker.MAX_ZINDEX) +paramss.count
     //});

        return new google.maps.Marker({
            position: paramss.position,
            icon: {
                url: 'data:image/svg+xml;base64,'+ svg,
                scaledSize: new google.maps.Size(45, 45),
            },
            label: {
                text: String(paramss.count),
                color: "rgba(255,255,255,0.9)",
                fontSize: "12px",
            },
            // adjust zIndex to be above other markers
            zIndex: Number(google.maps.Marker.MAX_ZINDEX) + paramss.count,
        });

    }
};

So the solution looks prettier and more classy