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

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

I believe I encountered the same issue whilst migrating from Vue 2 to Vue 3, where markers were successfully being removed upon setVisible(false) but were then reappearing upon zoom.
Seeing console errors relating to Proxy led me to believe that the cause of the issue was due to the differences in the reactivity systems of Vue 2 and Vue 3 (helpful article on Vue 3 reactivity).
For me the fix was to use markRaw() when creating the map, which essentially returns the Map Object itself without converting to a proxy.
<script>
import { markRaw } from 'vue'
export default {
methods: {
initMap () {
map = markRaw(new google.maps.Map(document.getElementById("map"), {...}))
}
}
}
</script>

Answer 2

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.