Google Maps API - Marker Cluster Styles Prevent Image From Showing?

Question

I have an issue where I am trying to change the font size and colour on the marker clusters but adding the styles prevents the image from showing? If I comment out the styles section, the image is showing correctly.

const cluster = new MarkerClusterer(this.map, this.map_markers, {
    imagePath: site_settings.template_directory + '/assets/images/marker-clusterer/m',
    styles:[{
        textSize: 12,
        textColor: 'white'
    }],
    maxZoom: this.map_max_zoom - 1,
    zoomOnClick: true
})

How can I add the styles to the marker but keep the image that is being used?

Answer 1

Resolved, as per Kristiyan D Kovachev's suggestion above.

new MarkerClusterer(this.map, this.map_markers, {
    styles:[{
        url: site_settings.template_directory + '/assets/images/marker-clusterer/m1.png',
        textSize: 12,
        width: 42,
        height: 42,
        textColor: 'white'
    }],
    maxZoom: this.map_max_zoom - 1,
    zoomOnClick: true
})  

Answer 2

As per the MarkerCluster library GitHub the style object needs an url which overwrites the imagePath .

Solution:

new MarkerClusterer(this.map, this.map_markers, {
    styles:[{
        url: site_settings.template_directory + '/assets/images/marker-clusterer/m1.png',
        textSize: 12,
        width: 42,
        height: 42,
        textColor: 'white'
    }],
    maxZoom: this.map_max_zoom - 1,
    zoomOnClick: true
})