Question: How do I style my cluster markers?

[tbmluijten]

I've been searching for a while online and inside the documentation but I can't find a clear answer how I (and if I) can create some custom cluster markers. The closest I got was the render option for the cluster markers, but the documentation isn't really clear on what I can actually do with the render function.

Hopefully someone can help me out with this question! I really like the plugin so far and would rather not switch do an other alternative! :D

[HusamElbashir]

Hi @tbmluijten

You should be able to use the CustomMarker component for your custom marker styling and combine it with the MarkerClusterer for clustering.

[tbmluijten]

Hi thanks for your response!
I did manage to customize my markers. My question is specifically about customizing the cluster marker. So pretty much the blue circle you get when everything is clustered. I'm not sure if this is possible. If it's not, then I can stop trying :D

[HusamElbashir]

Ah for that I think you'll have to create a custom renderer:
https://googlemaps.github.io/js-markerclusterer/interfaces/MarkerClustererOptions.html#renderer

See the default renderer for reference:
https://github.com/googlemaps/js-markerclusterer/blob/main/src/renderer.ts

[julianhirt]

For anybody who needs it. This is how I implemented it...

Define your custom renderer:

const svg = window.btoa(`
  <svg fill="#ff00ff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
    <circle cx="120" cy="120" opacity=".8" r="70" />
  </svg>`);

const renderer = {
  render: ({ count, position }) =>
    new google.maps.Marker({
      label: {
        text: String(count),
        color: "white",
      },
      position,
      icon: {
        url: `data:image/svg+xml;base64,${svg}`,
        scaledSize: new google.maps.Size(75, 75),
      },
      // adjust zIndex to be above other markers
      zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
      gridSize: 10,
    }),
};

And add it to marker cluster inside the template:

<MarkerCluster :options="{ renderer: renderer }">
 [...]
</MarkerCluster>