Google Map In Nuxt

<template>
 <Box ref="mapElement" w="full" flex="1" />
</template>

<script setup lang="ts">
    import { onMounted } from 'vue'

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

    import type { ComponentPublicInstance } from 'vue'
    import type Box from '~/components/core/layout/Box'

    const config = useRuntimeConfig()

    const mapElement = ref<ComponentPublicInstance<typeof Box> | null>(null)
    const map = ref<google.maps.Map>()
    const markers = []
    onMounted(() => {
        const loader = new Loader({
            apiKey: config.public.googlemapApiKey,
            version: 'weekly'
        })

        loader.importLibrary('maps').then(async () => {
            const { Map } = (await google.maps.importLibrary(
                'maps'
            )) as google.maps.MapsLibrary
            const savedPosition = localStorage.getItem('currentMapCenter')
            const mapCenter = savedPosition
                ? JSON.parse(savedPosition)
                : { lat: -34.397, lng: 150.644 }
            const savedZoom = localStorage.getItem('currentMapZoom')
            const mapZoom = savedZoom ? JSON.parse(savedZoom) : 5

            map.value = new Map(mapElement.value?.$el, {
                center: mapCenter,
                zoom: mapZoom,
                fullscreenControl: false,
                mapTypeControl: false,
                streetViewControl: false
            })
            navigator.geolocation.getCurrentPosition(
                (res) => {
                    const { latitude, longitude } = res.coords
                    markers.push(
                        new google.maps.Marker({
                            position: { lat: latitude, lng: longitude },
                            map: map.value
                        })
                    )
                },
                console.log,
                {}
            )
            map.value?.addListener('bounds_changed', () => {
                localStorage.setItem(
                    'currentMapCenter',
                    JSON.stringify(map.value?.getCenter())
                )
                localStorage.setItem(
                    'currentMapZoom',
                    JSON.stringify(map.value?.getZoom())
                )
            })

            map.value?.addListener(
                'click',
                (event: google.maps.FeatureMouseEvent) => {
                    const { latLng } = event
                    if (!latLng) {
                        return
                    }
                    const { lat, lng } = latLng

                    markers.push(
                        new google.maps.Marker({
                            position: { lat: lat(), lng: lng() },
                            map: map.value
                        })
                    )
                }
            )
        })
    })
</script>

<style></style>