How to display AdvancedMarkerView of google map in vue 3

Question

I want to use AdvancedMarkerElement in vue 3 but is not work, but when I replace with Marker, the marker is displayed.

This is my script, when I replace Marker with AdvancedMarkerElement nothing is displayed:

<script>
import { Loader } from "@googlemaps/js-api-loader";
import { onMounted, ref } from "vue";

const GOOGLE_MAPS_API_KEY = "my_key";

export default {

  setup() {
    const loader = new Loader({
      apiKey: GOOGLE_MAPS_API_KEY,
      version: 'beta',
    });

    const mapDiv = ref(null);
    let map = ref(null);

    onMounted(async () => {
      const { Map } = await loader.importLibrary("maps");
      const { AdvancedMarkerElement } = await loader.importLibrary("marker");

      map.value = new Map(mapDiv.value, {
        center: { lat: 9.3622369, lng: 3.3455534 },
        zoom: 7,
        mapId:"map_id"
      });

      new AdvancedMarkerElement ({
        map: map.value,
        position: { lat: -25.344, lng: 131.031 },
        title: "Uluru",
      });
    });
    return { mapDiv };
  },
};
</script>

Answer 1

I stumbled into this problem as well, and managed to solve it by simply not making map a ref (which you probably shouldn't do anyway as it makes all the internal properties of the map reactive).

If you really need the map instance to be a ref, I suggest using shallowRef and retrieving the raw object behind the proxy using toRaw:

import {shallowRef, toRaw} from 'vue'

const map = shallowRef(null);

// ...

new AdvancedMarkerElement({
    map: toRaw(map),
    position: { lat: -25.344, lng: 131.031 },
    title: "Uluru",
});