Problem with ClusterMarker styling in Vue 3

[pims90]

Hi all,

I have a problem finishing a project because of the Cluster Marker.

How do you style the ClusterMarker in a Vue 3 project with the Composition API / Script setup? I haven't been able to find any useful examples online. The official ClusterMarker docs from Google don't give me enough hints how to apply this in a Vue 3 context.

The regular Marker component can easily be styled with the 'icon' in the 'options' prop but it's a different story for the Cluster Marker.

It has to do with the 'renderer' Interface: https://googlemaps.github.io/js-markerclusterer/interfaces/Renderer.html but I don't understand how to apply this to my project.

Any help is much appreciated!

<script setup lang="ts">
// eslint-disable-next-line import/no-extraneous-dependencies
import { GoogleMap, Marker, MarkerCluster, InfoWindow } from 'vue3-google-map';
import { apiKey } from '../constants/api-key';
import locations from '../data/repaircafes.json';

const latLngUtrecht = { lat: 52.090505932596656, lng: 5.120589111595331 };

const latlng = (coordinate: string) => {
  const coordinates = coordinate.split(',');
  const [lat, lng] = coordinates.map((value) => parseFloat(value));

  return { lat, lng };
};
</script>

<template>
  <GoogleMap
    :api-key="apiKey"
    :map-type-control="false"
    :fullscreen-control="false"
    :street-view-control="false"
    :center="latLngUtrecht"
    :min-zoom="7"
    :zoom="9"
    class="google-map"
  >
    <MarkerCluster>
      <Marker
        v-for="(location, i) in locations"
        :key="i"
        :options="{
          position: latlng(location.coordinate),
          title: location.name,
          icon: 'data:image/svg+xml,%3C%3Fxml%20version%3...'
        }"
      >
        <InfoWindow>
          <div id="content">
            <a :href="location.link" target="_blank'" class="n-display-7">
              {{ location.name }}
            </a>

            <p class="n-display-7">{{ location.address }}</p>
          </div>
        </InfoWindow>
      </Marker>
    </MarkerCluster>
  </GoogleMap>
</template>