AdvancedMarkerView in Vue 3

Question

When using Google Maps AdvancedMarkerView isn't showing on the map. This problem only occurs when storing googleMap in the component. When storing googleMap in a const or window object its working fine.

I would like to store it in the component, so I can add or remove markers later. Am I missing something or is this because AdvancedMarkerView is beta?

mounted() {
    const loader = new Loader({
        apiKey: 'key',
        version: 'beta',
        libraries: ['marker'],
    });

    loader.load().then((google) => {
        this.googleMap = new google.maps.Map(this.$refs.map, this.mapOptions);
        // const googleMap = new google.maps.Map(this.$refs.map, this.mapOptions);
        // window.googleMap = new google.maps.Map(this.$refs.map, this.mapOptions);

        // Marker works fine
        new google.maps.Marker({
            map: this.googleMap,
            position: this.home.position,
        })

        // Works only with window.googleMap or const googleMap
        new google.maps.marker.AdvancedMarkerView({
            map: this.googleMap,
            position: this.home.position,
            content: this.buildContent(this.home),
            title: this.home.title
        });
    });
},

Answer 1

Vue3 with Advanced Markers works for me, here is my codesanbox: https://codesandbox.io/s/vue-3-google-map-base-circles-forked-1hbe2p?file=/src/components/GoogleMapLoader.vue

One thing to note is that, in Vue3, it seems using data() interferes with this.map, after changing data() to setup(), then it works fine.

Change to your API key and you should be able to see the new markers.