I have a map where I draw polygons. I want to remove the previously drawn polygon when I start drawing a new one.

In effect: I would have only one polygon on the map simultaneously. Code seems work in the begining. However after I use scroll on map previously drawn polygons reapear.

I use Vue.js, so perhaps the issue is with me incorrectly using either Vue API or google maps API.

Here is 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, "overlayplete", (event) => {
    if (oldShape.value!==null) {
      oldShape.value.setMap(null);
    }
    const shape = event.overlay;
    shape.type = event.type;
    oldShape.value = shape;
  });
});

Effect I draw first polygon.

After that I draw another. First polygon disappeared: good. However when I zoom out previously removed polygons appear again.

This is not desired behaviour.

I have a map where I draw polygons. I want to remove the previously drawn polygon when I start drawing a new one.

In effect: I would have only one polygon on the map simultaneously. Code seems work in the begining. However after I use scroll on map previously drawn polygons reapear.

I use Vue.js, so perhaps the issue is with me incorrectly using either Vue API or google maps API.

Here is 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, "overlayplete", (event) => {
    if (oldShape.value!==null) {
      oldShape.value.setMap(null);
    }
    const shape = event.overlay;
    shape.type = event.type;
    oldShape.value = shape;
  });
});

Effect I draw first polygon.

After that I draw another. First polygon disappeared: good. However when I zoom out previously removed polygons appear again.

This is not desired behaviour.

• javascript
• vue.js
• google-maps
• google-maps-api-3

3 Answers 3

This has to do with how Vue creates proxies for objects. If you use the toRaw() function when setting the map to null, it will fix the issue. We ran into this same issue as well.

I'm not sure if you have to call it with the oldShape object or oldShape.value, as we use the Options API.

// from
oldShape.value.setMap(null);
// to
toRaw(oldShape).setMap(null);

Seems removing ref from oldShape helped here. So instead of:

let oldShape = ref(null);

it is:

let oldShape = null;

However, I am not sure why it wouldn't work before.

happen the same here when I used oldShape as a part of ponent data.

data: function() {
  return {oldShape: null}
}

my assumption that on render something happen and already unlinked oldShape get restored to original state, or value that has been assigned to oldShape is sort conflict with Polygon google objects?

Will post if find something extra here.

UPD: so it is conflict between google map objects and vue ponent properties.

I worked around by defining oldShape in created:

created: function(){
  this.oldShape = null
}

without defining it as a part of ponent