[Vuejs]-Nuxt Plugin not adding google maps script tag

by

1👍

Have you tried using the useHead composable instead of using plain javascript?

Basic example would be like this.

Note: private runtime configs will return undefined in the client. To fix that, you need to move your API key to public.

~/plugins/map.client.ts

export default defineNuxtPlugin((nuxtApp) => {
    let config = useRuntimeConfig()
    useHead({
        script: [
            {
                src: `https://maps.googleapis.com/maps/api/js?key=${config.public.GOOGLE_MAP_KEY}&libraries=places,drawing,geometry&callback=initMap`,
                async: true,
            }, {
                src: '/scripts/map-init.js',
                async: true
            }
        ]
    })

})

~/public/scripts/map-init.js

let map

function initMap() {
    map = new google.maps.Map( document.getElementById( "map" ), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
    } )
}

window.initMap = initMap

The protection of your API key can be configured in the Google cloud.
enter image description here

Expected output
enter image description here

👤ReaganM

Leave a comment