Warning displayed when switching routes about vue2-gmap-custom-marker

[eregnier]

Ok, i'll have a look.

[eregnier]

I reproduced locally and I do not have the issue on the sample demo that are on gh-pages.
do you have some additional clues to troubleshot this issue ?
Any code avaimable ? or stack trace ?
Your code may destroy the map before the component is destroyed by the page change from the vue router.

[eregnier]

Closing due to inactivity and not reproducable on my side.

[anchetaWern]

@eregnier I got the same error. Here's the code I'm using:

<GmapMap :options="options" :center="center" :zoom="zoom" class="ais-GeoSearch-map" @zoom_changed="zoomChanged">

    <gmap-custom-marker :marker="{ lat: item._geoloc.lat, lng: item._geoloc.lng }" :key="item.objectID" v-for="(item, index) in state.items" @click.native="selectMarker(item)">
        <img src="http://lorempixel.com/50/50/nature" />
    </gmap-custom-marker>

    <GmapInfoWindow :position="selected_coordinate" :opened="isInfoWindowOpen" @closeclick="closeInfoWindow">
    {{ selectedLocation }}
    </GmapInfoWindow>

</GmapMap>

I'm using it with vue2-google-maps and instantsearch:

import Vue from "vue";
import * as VueGoogleMaps from "vue2-google-maps";
import GmapCustomMarker from "vue2-gmap-custom-marker";
import { createWidgetMixin } from "vue-instantsearch";
import { connectGeoSearch } from "instantsearch.js/es/connectors";

Vue.use(VueGoogleMaps, {
    load: {
        key: process.env.GOOGLE_API_KEY,
    },
});

export default {
    mixins: [createWidgetMixin({ connector: connectGeoSearch })],
    components: {
        'gmap-custom-marker': GmapCustomMarker
    },
    // ...
}

Here's the exact warning I'm getting:

[Vue warn]: Error in destroyed hook: "TypeError: Cannot read property 'setMap' of undefined"

found in

---> <GmapCustomMarker> at node_modules/vue2-gmap-custom-marker/gmap-custom-marker.vue
       <GmapMap> at node_modules/vue2-google-maps/dist/components/map.vue
         <AppMap> at resources/js/search/components/Map.vue
           <AisInstantSearch>
             <App> at resources/js/search/App.vue
               <Root>

I was able to solve it by doing something like this:

<gmap-custom-marker v-if="isMapInitialized" :marker="{ lat: item._geoloc.lat, lng: item._geoloc.lng }" :key="item.objectID" v-for="(item, index) in state.items">
     ...
</gmap-custom-marker>

mounted() {
        setTimeout(() => {
            this.isMapInitialized = true;
        }, 1000);
    }

Would be good to have a better way of doing it.

[eregnier]

Hey . I think you should try to empty your state.items list in the wrapping component destroy hook. This would prevent map component repaint after yoyr route changed.

Is it clear enough ?