inocan-group/vue3-google-map

Memory usage never goes down after map component is unmounted

Opened this issue · 1 comments

Vue 3.5.13

I have a page where I display an address on a map:

<GoogleMap
    api-key="myKey"
    :center="markers[0].mapCenter"
    mapId="myMapId"
    ref="jobSiteMap"
    :zoom="12"
    v-if="jobSite.address !== null && this.addressGeocoded">
        <AdvancedMarker 
            :key="index"
             v-for="(m, index) in markers"
            :options="{ position: m.mapCenter }" />
</GoogleMap>
<script>
    import { GoogleMap, AdvancedMarker } from 'vue3-google-map'
    
    export default {
        components: { GoogleMap, AdvancedMarker },
        ...
        watch: {
            'jobSite.address': function(newAddress) {
                if (newAddress) {
                    if (this.$store.getters.getGoogleMapsGeocoder === null) {
                        let geocoder = new google.maps.Geocoder()
                        this.$store.commit('setGoogleMapsGeocoder', geocoder)
                    }
                    this.$store.getters.getGoogleMapsGeocoder.geocode({ address: newAddress }, (results, status) => {
                        this.markers = []
                        if (status !== 'OK' || !results[0]) {
                            throw new Error(status);
                        }
                        let marker = {
                            mapCenter: {
                                lat: results[0].geometry.location.lat(),
                                lng: results[0].geometry.location.lng()
                            }
                        }
                        this.markers.push(marker)
                        this.addressGeocoded = true
                    })
                }
            }
        }
    }
}

The behavior I'm observing is that every time the page is rendered, the browser tab's memory usage goes up, and it does not go back down when I navigate away from the page. Repeatedly navigating away and then back to the page results in a perpetual increase in memory usage.

image

If I comment out the GoogleMap component, memory usage remains stable when navigating back and forth:

image

Similarly, if I never set this.addressGeocoded to true (thereby never meeting the v-if condition on the GoogleMap component), memory usage doesn't increase:

image

So there appears to be a memory leak in this library, where its footprint does not get garbage collected. I looked at the source code and saw that clearInstanceListeners is called inside beforeUnmount, so I'm not sure what's going on.

I created a demo repository with detailed steps to reproduce the issue.