is there a way to tell which markers are being clustered using vue2-google-maps and marker-clusterer-plus

Question

Hello Everyone I would like to find out if there is a way to tell what custom markers are being clustered and also if there is a way to listen to the change of the markers being declustered on zoom in?

<template>
<gmap-map
  ref="gmap"
  :options="{
    disableDefaultUi: true,
    scaleControl: false,
    streetViewControl: false,
    rotateControl: false,
    fullscreenControl: false,
    scrollwheel: false,
    clickableIcons: false
  }"
  :center="center.hasOwnProperty('lat') ? center : markers[0].position"
  :zoom="10"
  :style="{ width: width, height: height }"
>
   <gmap-cluster
      :gridSize="30"
      :zoomOnClick="true"
      :enableRetinaIcons="true"
      :minimumClusterSize="3"
      ref="cluster"
      @click="clusteredMarkers($event)"
    >
      <gmap-custom-marker
        v-for="(m, index) in markers"
        :key="index"
        :id="index"
        :marker="m.position"
        ref="marker"
       >
        <v-avatar color="primary" size="25">
          <span
            @click="center = m.position"
            @mouseover="$emit('changeEl', index + 1)"
            @mouseleave="$emit('changeEl', '')"
            size="15"
            :class="
              hoveringEl - 1 === index ? 'white--text' : 'white--text'
            "
            >{{ index + 1 }}</span
          >
        </v-avatar>
      </gmap-custom-marker>
    </gmap-cluster>
</gmap-map>
</template>

My Script looks like this:

<script>
import GmapCustomMarker from 'vue2-gmap-custom-marker';
import GmapCluster from 'vue2-google-maps/dist/components/cluster';

export default {
  name: 'GoogleMap',

  components: {
    GmapCustomMarker,
    GmapCluster
  },

  props: {
    markers: {
      type: [Object, Array],
      required: false
    },
  },

  data() {
    return {
      center: {},
      places: [],
      currentPlace: null
    };
  },

  methods: {
    clusteredMarkers(event) {
      console.log(event.getMarkers());
    }
  }
};
</script>

I had to remove sensitive information and left what I think is required to see the full scope of the issue. Please let me know if you need additional information.

On my console I get the right amount of markers when I click on the cluster but not sure how to identify them within my markers. Also I added an Id to the gmap-custom-marker and when I console.log(this.$refs.marker) I get access to that Id but not sure how to identify if is on the cluster or not. Any ideas on how to proceed?

Answer 1

I solved the problem for gmap-marker - this is what worked for me, might be relevant to custom marker component too.

In method at @click event of cluster object - the handler method receives Cluster object, which contains function getMarkers that returns list of markers in some obscure format, rather than actual list of markers. But those markers have getTitle method, which pulls info that was set as title prop of gmap-marker component in the template. So, by setting some sort of id at that prop plus for each marker, it's possible to map cluster's "markers" to your markers.

Script example:

  toggleClusterInfo(cluster: Cluster) {
    //* Extract markers id list from cluster
    const markersIdList: string[] = []
    const gmapMarkers: { getTitle: () => string }[] = cluster.getMarkers()
    gmapMarkers.forEach((m) => markersIdList.push(m.getTitle()))

    // TODO: markersIdList contains list of values at `title` prop for each marker
    // use it to map to objects itself.
  }

And template example (important to set title prop to marker):

  <GmapCluster @click="toggleClusterInfo">
    <GmapMarker
      v-for="m in markers"
      :key="m.id"
      :title="m.id"
      :position="m.position"
      :clickable="true"
    ></GmapMarker>
  </GmapCluster>

Relevant info at this SO question:

how to find the markers in the individual clusters in a marker cluster object in google maps api v3?