Added styles to the cluster are not applied

[Kainar9292]

I want to change the cluster icon, but when I change the styles, the cluster icon stays default. Can you tell me what I'm doing wrong or is this a bug?

Using the render function also fails to render another icon. In this case, the cluster disappears altogether and even the standard icon is not displayed. I am attaching screenshots of my code:

Thanks in advance for your answer to my question

[NathanAP]

Hello! Sorry if I'm late.

It seems that icon is not really well documented on how to use them. We should try to make it work and then change the docs to be more clear on how to do it.

This example shows that you can add a custom icon to marker by adding an url to it. Did you try it?

The renderer part, when you look into the code, you see that it is a new DefaultRenderer that is imported from @googlemaps/markerclusterer (image below). I believe we could try to see if using it could help you to customize your own Cluster.

[scrtechnologies]

The code below should work in Nuxt 3

<script setup lang="ts">
const render = ({ count, position }) =>
    new google.maps.Marker({
        label: { text: String(count), color: 'white', fontSize: '10px' },
        position,
        // adjust zIndex to be above other markers
        zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
    })
</script>

<GMapCluster :renderer="{ render }"></GMapCluster>

[Kainar9292]

Hello! Sorry if I'm late.

It seems that icon is not really well documented on how to use them. We should try to make it work and then change the docs to be more clear on how to do it.

This example shows that you can add a custom icon to marker by adding an url to it. Did you try it?

The renderer part, when you look into the code, you see that it is a new DefaultRenderer that is imported from @googlemaps/markerclusterer (image below). I believe we could try to see if using it could help you to customize your own Cluster.

I tried to apply for the cluster as in the example for the marker icon, it did not help me, although it works on the marker icon

[Kainar9292]

The code below should work in Nuxt 3

<script setup lang="ts">
const render = ({ count, position }) =>
    new google.maps.Marker({
        label: { text: String(count), color: 'white', fontSize: '10px' },
        position,
        // adjust zIndex to be above other markers
        zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
    })
</script>

<GMapCluster :renderer="{ render }"></GMapCluster>

It didn't work for me on vue 3. The cluster, like the markers, disappear

[Amaurgit]

Same here, can't manage to make the clusters work... Any idea ?

[alexandrapopa96]

Hello,

I had the same issue with changing the icon for the cluster. For me, in vue3, this worked:

[Kainar9292]

this version works in my project:

[elvismercado]

I was also having this issue using a Vue3+Vite project.
The code by @alexandrapopa96 and @Kainar9292 worked for me