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?