Vue 3 google map circle is not being removed from the map

Question

Vue 3 google map circle is not being removed from the map

I am currently migrating from Vue 2 to Vue 3.

In Vue 2 I could remove circles, but in Vue 3 I run into the problem that the circles first disappear when removed. But when zoom-in and zoom-out they reappear. I do use the .setMap(null) method for removing the circles.

I use the circles to show a geofence for a POI (point of interest) and This geofence also has a marker in the centre and I can remove the marker without any problems.

Has anyone else encountered the same problem? Is this a problem people also run into in other frameworks?

How I create the map circles and markers

 public LoadPoiMarkersAgain (
    googleMapLoader: IGoogleMapLoader
  ): HTMLMapMarker[] {
    const markers: HTMLMapMarker[] = []
    for (let i = 0; i < googleMapLoader.mapPoiData.length; i++) {
      const marker = createHTMLMapMarker({
        latlng: new google.maps.LatLng(
          {
            lat: googleMapLoader.mapPoiData[i].latitude,
            lng: googleMapLoader.mapPoiData[i].longitude
          },
          null,
          true
        ),
        map: googleMapLoader.map,
        data: googleMapLoader.mapPoiData[i],
        html: this.CreatePoiMarkerHTML(
          googleMapLoader,
          googleMapLoader.mapPoiData[i]
        )
      })
      const markerCircle = new google.maps.Circle({
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: googleMapLoader.map,
        center: new google.maps.LatLng(
          {
            lat: googleMapLoader.mapPoiData[i].latitude,
            lng: googleMapLoader.mapPoiData[i].longitude
          },
          null,
          true
        ),
        radius: googleMapLoader.mapPoiData[i].radius
      })
      this.AddClickListenerToPoiMarker(marker, map)
      markers.push(marker)
      markerCircle.set('poiId', googleMapLoader.mapPoiData[i].poiId)
      googleMapLoader.mapCircles.push(markerCircle)
    }
    return markers
  }

How I remove the circles

public RemoveMapMarkersData (
    googleMapLoader: IGoogleMapLoader
  ): void {
    if (googleMapLoader.mapCircles.length > 0) {
      googleMapLoader.mapCircles.forEach(
        (element: google.maps.Circle) => {
          element.setMap(null)
        }
      )
    googleMapLoader.mapCircles = []
    }
    // Some more code to remove markers
  }

What i have tried

attempt 1

I tried using

element.setVisible(false)

This does not work either.

attempt 2

I tried changing the order for when the circle is removed versus the marker. This does not work either.

attempt 3

I also tried removing the circle Immediately after, I added them to the map. That does seem to work.

 public LoadPoiMarkersAgain (
    googleMapLoader: IGoogleMapLoader
  ): HTMLMapMarker[] {
    // previous code
    googleMapLoader.mapCircles.forEach((circle: google.maps.Circle) => {
circle.setMap(null)
    })
    // previous code
}

Could it be that Vue 3, Is not passing the references correctly to my method?

Package

enter link description here

Google documentation

Google docs remove circle

Google docs remove marker

Extra

I have a gif that demonstrates the problem.

When I drag the map it should remove the circle. But when zooming in and out, the circle reappears.

https://i.gyazo.com/b7310cc4d748da36e026104aff6cb2fe.gif

I have also created two sandboxes to demonstrate the problem: (When you move your mouse out of the map, the circles will be removed)

Vue 2

Vue 2 + google maps

Vue 3

Vue 3 + google maps

Answer 1

Sadly enough I could not fix the problem in proper way, but I have a place holder solution for now.

My place holder solution is to remove the map when removing the circles and markers. After removing the map I render / reinitialise the map again.

Vue 3 - remove map when removing circles

If I can remove the circles and markers as intended by google, Then I will post an update on this again.