I am working on a map project where I draw polygons. My goal is to remove the previously drawn polygon whenever a new one is being drawn.
Initially, everything seems to work fine. However, when I use the scroll function on the map, the previously drawn polygons reappear.
I am utilizing Vue.js for this project, so it's possible that the issue lies in my incorrect usage of either the Vue API or Google Maps API.
Below is a snippet of my code:
const loader = new Loader({ apiKey: googleApiKey, libraries: ["drawing"] });
let map = ref(null);
const mapDiv = ref(null);
let oldShape = ref(null);
onMounted(async () => {
await loader.load();
map.value = new google.maps.Map(mapDiv.value, {
center: currentPosition.value,
zoom: 7,
});
const drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: false,
polygonOptions: {
editable: true,
fillColor: "#ffff00",
},
});
drawingManager.setMap(map.value);
google.maps.event.addListener(drawingManager, "overlaycomplete", (event) => {
if (oldShape.value !== null) {
oldShape.value.setMap(null);
}
const shape = event.overlay;
shape.type = event.type;
oldShape.value = shape;
});
});
When I draw the first polygon, it looks like this: https://i.sstatic.net/502NE.png
Then, when I draw another polygon, the first one disappears, which is good: https://i.sstatic.net/kgpTk.png
However, when I zoom out, the previously removed polygons reappear, which is not the desired behavior: https://i.sstatic.net/FI4ox.png
This unexpected behavior needs to be addressed.