How to remove Google map markers in Vue?

Question

I'm using Google API to display a map, markers, and polygons.
When I 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 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. 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
      },
    }
  }

Answer 1

When we store the Markers in the markers array, vue.js 3 converts them to Proxy objects.
That causes a problem when we later call Proxy.setMap(null) ; Google Maps somehow doesn't like that, probably because the Proxy object is not === the original Marker object added to the map initially.

The workaround I found was to use toRaw() before using any Google Maps objects that were converted to Proxy objects:

import {toRaw} from 'vue';

this.markers.map((marker) => toRaw(marker).setMap(null))