Struggling to customize cluster icon

[ivan006]

I struggled for some time but had some key findings thanks to chatgpt

you do something like this

https://stackoverflow.com/questions/71129102/how-to-specify-custom-cluster-marker-for-a-google-map

but instead of saying new google.maps.Marker( you write new this.$refs.mapRef.api.Marker( (sorry yes im using options api so convert the reffing logic composition if you need) . But of course you have to make sure you assign that ref to

<GoogleMap
      ref="mapRef"

alternatively you can get api this other way (see https://vue3-google-map.com/advanced-usage/#usage-patterns) and pass it as a param

  <GoogleMap ref="mapRef">
      <template #default="{ api }">
        <InocanMarkerCluster
          :options="clusterOptions(api)"
        >

  methods: {
    clusterOptions(api) {
      return {
        renderer: {
          render: ({ count, position }) => new api.Marker({
            position,
            icon: this.clusterIcon, // Use custom icon computed above
            label: { text: String(count), color: 'white', fontSize: '12px' },
            zIndex: 999 + count
          })
        }
      }
    },

hope this helps future cluster stylers

[ivan006]

cant figure out how to set the anchorText though, if anyone can help

[tony-nz]

On the render return, try using the url setting within icon:

icon: {
          url:
            "data:image/svg+xml;charset=UTF-8;base64," +
            btoa(
              generateSvgMarker({
                priority: waypoint.priority,
                height: waypoint.height ? waypoint.height : 50,
                width: waypoint.width ? waypoint.width : 50,
                fill: fillColor.value,
                stroke: strokeColor.value,
              })
            ),
          size: new window.google.maps.Size(width, height),
          // anchor: new window.google.maps.Point(16, 32),
        },

My generateSvgMarker:

export const generateSvgMarker = (payload: Partial<SVGMarkerSettings>) => {
  const settings: SVGMarkerSettings = {
    ...DEFAULT_MARKER_SETTINGS,
    ...payload,
  };

  return `
  <svg height="${settings["height"]}" width="${settings["width"]}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
    <g>
      <!-- Original polygon -->
      <polygon points="10,10 110,10 110,80 60,100 10,80" fill="${settings["fill"]}" stroke="${settings["stroke"]}" stroke-width="${settings["strokeWidth"]}" />
    </g>

    <text x="60" y="55" fill="${settings["textFill"]}" font-family="${settings["fontFamily"]}" font-size="${settings["fontSize"]}" text-anchor="${settings["textAnchor"]}" alignment-baseline="${settings["alignmentBaseline"]}">
      ${payload.priority}
    </text>
  </svg>`;
};

[EdwinJMataH]

Hello! I customize the bookmark icon, I don't know if it's really what you were looking for. I share it in the same way, hoping it will be useful to you.

<Marker
        :options="
          { 
            position: location, 
            icon: {
              url: 'https://vuejs.org/images/logo.png',
              scaledSize: {width: 25, height: 25},
              labelOrigin: {x: 16, y: -10}
            }   
        }"
        >
      </Marker>