I’m using google API to display a map, markers, and polygons.
The problem is when I want to add a new marker, the previous markers are not gone.
I save the map, markers & polygons inside my data state
data() {
return {
google: window.google,
map: null,
activeInfoWindow: null,
polygons: [],
markers: []
}
},
I have already tried to remove the previous markers with marker.setMap(null) before showing new markers
filtersResults: function (filterResults) {
// REMOVE PREVIOUS ACTIVE MARKER
this.markers.map((marker) => marker.setMap(null))
},
I tried to empty the markers array too. but nothing happens, the markers still show on the map
the setMap is not undefined, this is the result when I’m console.log(marker.setMap)
ƒ (c){try{this.set(a,b(c))}catch(d){_.Pe(_.Oe("set"+_.Bf(a),d))}}
data() {
return {
google: window.google,
map: null,
activeInfoWindow: null,
polygons: [],
markers: []
}
},
async mounted() {
const { LatLng, Map, MapTypeId } = this.google.maps
this.map = new Map(document.getElementById('map'), {
zoom: 10,
center: new LatLng(process.env.INITIAL_LAT, process.env.INITIAL_LNG),
mapTypeId: MapTypeId.ROADMAP
})
},
watch: {
filtersResults: function (filterResults) {
// REMOVE PREVIOUS ACTIVE MARKER
this.markers.map((marker) => marker.setMap(null))
this.markers = []
},
assets: {
handler: function (newValue) {
const { map } = this
if (isNotNullAndUndefined(newValue) && map) {
// ! GENERATE MARKER IN HERE
this.markers = newValue.map((value) => {
const { location } = value
return this.generateMarkers({
latitude: dotFormat(location.lat),
longitude: dotFormat(location.lng),
details: value
})
})
}
},
immediate: true
}
},
methods: {
generateMarkers({ latitude, longitude, details }) {
const { map, google } = this
const { LatLng, Marker } = google.maps
const marker = new Marker({
position: new LatLng(latitude, longitude),
draggable: false
})
marker.setMap(map)
return marker
},
}
}
Anyone knows about this issue & how to fix it?
I really appreciate it if you do some comments
thanks, btw happy new year
