Warning:Google Maps already loaded outside @googlemaps/js-api-loader

Question

I am trying to utilize AdvancedMarkerView of Google Maps API with @googlemaps/js-api-loader in Nuxt3 in order to create a map similar to the one found here.
I attempted to use the example code for Advanced Markers found in @googlemaps/js-api-loader, but the markers are not showing up on the map.

Here is example code:
https://github.com/googlemaps/js-api-loader/tree/main/examples

Here is my code:

HTML:

<div id="canvas" ref="canvas" class="canvas"></div>

TypeScript - maps.vue:

import { Loader } from '@googlemaps/js-api-loader';

const map = ref<google.maps.Map>();
const canvas = ref<HTMLElement>();

const loader = new Loader({
   apiKey: *************,
   version: "weekly",
   libraries: ["places"],
});

const initMap = () => {
    loader.importLibrary('maps')
        .then(async ({Map}) => {
            map.value = new Map(canvas.value as HTMLElement, {
                center: { lat: 34.6937, lng: 135.5023 },
                zoom: 17,
                mapId: '**************',
            });
            const priceTag = document.createElement('div');
                priceTag.className = 'price-tag';
                priceTag.textContent = '$2.5M';
            const {AdvancedMarkerElement} = await loader.importLibrary('marker'); // Here is line186
            new AdvancedMarkerElement({
                map: map.value,
                position: { lat: 34.6937, lng: 135.5023 },
                content: priceTag,
            });
        })
        .catch((e) => {
            // do something
        });
}

onMounted(() => {
      initMap();
})

A warning message is displayed:

maps.vue:186 
Google Maps already loaded outside @googlemaps/js-api-loader.This may result in undesirable behavior as options and script parameters may not match.

How can I modify the code so that the marker shows up on the map?

PS:

I created a sample code on codesandbox.

https://codesandbox.io/s/interesting-sun-4xzhnf?file=/src/App.vue

Answer 1

I found my mistake. When I changed it not to use ref to load the map,
the marker was displayed on the map.

const map = new Map(canvas.value as HTMLElement, {...

new AdvancedMarkerElement({
             map,
             ...

However, the warning is still displayed, but I will try using the map for the time being.
Thank you very much.