I am working on a platform where users can report crimes or incidents by placing markers on a map. These markers with all the reported incidents are then displayed on another map.
Each marker has an info window that provides details about the incident and the time it was reported.
The issue I am encountering is that when I click on one marker to view its info window, all of the info windows open simultaneously.
Take a look at my code snippet:
<template>
<div>
<GmapMap
ref="mapRef"
:center="{ lat: 10, lng: 10 }"
:zoom="11"
style="width: 500px; height: 300px"
>
<GmapMarker
:key="index"
v-for="(m, index) in this.markers"
:position="m.position"
:clickable="true"
@click="openWindow"
>
<GmapInfoWindow
:opened="window_open"
:position="m.position"
>
Incident: {{ m.incident }}<br />
Time: {{ m.time }}
</GmapInfoWindow>
</GmapMarker>
</GmapMap>
</div>
</template>
<script>
import { gmapApi } from "vue2-google-maps";
import { db } from "../main";
export default {
name: "MapComponent",
data() {
return {
markerCollection: [],
markers: [],
info_marker: null,
window_open: false,
};
},
firestore() {
return { markers: db.collection("Reports") };
},
methods: {
openWindow() {
if (this.window_open) {
this.window_open = false;
} else {
this.window_open = true;
}
},
},
mounted() {
// After mounting the child GmapMap, initialize the map.
// Use mapRef.$mapPromise.then(() => ...) for this.
this.$refs.mapRef.$mapPromise.then((map) => {
map.panTo({ lat: 10, lng: 10 });
});
},
computed: {
google: gmapApi,
},
};
</script>
I have reviewed other implementations using GmapInfoWindows, but they only had one each and did not face similar issues. Even after testing their codes, the problem persists. I have experimented with various approaches involving boolean values as well.
Any suggestions to solve this issue?