Google Maps API 'TypeError: Cannot read properties of undefined (reading 'maps')' when loading component using onMount() in Vue3

Question

I'm creating a Vue app and using Google Maps API to render a map but when I try loading it, I receive the error 'TypeError: Cannot read properties of undefined (reading 'maps')'

I don't know where this error is coming from as I've imported the google map Loader function using:

I'm assuming it's coming from the google object maps property here:

onMounted(async () => {
            await loader.load()
            new google.maps.Map(mapDiv.value, {
                center: currPos.value,
                zoom: 14
            })
        })

I've taken a screenshot of the error Error from console

I've imported the Loader from google maps in the component itself, and also in the view that renders the component.

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

However, on page load it still throws the error that maps is not found. 'TypeError: Cannot read properties of undefined (reading 'maps')'

The Loader comes from an npm package here: https://www.npmjs.com/package/@googlemaps/js-api-loader

Answer 1

google variable is not defined in your script, which should be a response, so assign the response from load method to google variable :

onMounted(async () => {
           let google =  await loader.load()
             new google.maps.Map(mapDiv.value, {
                center: currPos.value,
                zoom: 14
            })
        })