Give Us an Example of Options in MarkerClustererOptions

[irfanazizalamin]

https://github.com/inocan-group/vue3-google-map/blob/a58dfa951813320e4a590c518636785169d315d6/src/components/MarkerCluster.ts#L11

[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~~ `

• 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,
    });
  },
});