Give Us an Example of Options in MarkerClustererOptions

[irfanazizalamin]

vue3-google-map/src/components/MarkerCluster.ts

Line 11 in a58dfa9

type: Object as PropType<MarkerClustererOptions>,

[HusamElbashir]

Hi

You can refer to the documentation page here:
https://googlemaps.github.io/js-markerclusterer/interfaces/MarkerClustererOptions.html

[aefika]

The documentation does not give an example as requested in the subject.
I've managed to get some information from 2 pages but I'm not able to make it work.

These are the pages:
https://stackoverflow.com/questions/73286425/google-maps-markerclusterer-how-to-combine-interface-renderer-and-gridoptions-g
https://googlemaps.github.io/js-markerclusterer/public/renderers/

Here is my code:
template
<MarkerCluster> :options:"{ renderer: ClusterRenderer; }" <Marker v-for="asset in filteredAssets" </Marker> </MarkerCluster>

script, method
ClusterRenderer(){ let renderer = { render: ({ count, position }) => new google.maps.Marker({ label: { text: String(count), color: "transparent", }, position, icon: { url: import.meta.env.VITE_APP_URL+"/assets/img/map_cluster_icon.svg", }, // adjust zIndex to be above other markers zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count, }), }; return renderer; },

Has anyone managed to make it work?

[RayHung95]

hi, this is my code, you can try it, it works for me:

• in html:

<MarkerCluster ref="clusterRef" :options="{ renderer, algorithm, }" > your all markers~~ </MarkerCluster>

• import function
  import {
  SuperClusterAlgorithm,
  } from "@googlemaps/markerclusterer";

• javascript

const algorithm = new SuperClusterAlgorithm({
  radius: 120,
  maxZoom: 14,
  log: true,
  generateId: false,
  minPoints: 20,
});

const renderer = ref({
  render: ({ count, position, bounds }, stats, map) => {return new google.maps.Marker({
      position,
      icon: {
        url: `https://cdn-icons-png.flaticon.com/512/10875/10875954.png`,
        scaledSize: new google.maps.Size(30, 30),
      },
      label: {
        text: String(count),
        color: "red",
        fontSize: "14px",
      },
      zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
    });
  },
});