olefirenko / vue-google-autocomplete

A Vue.js autosuggest component for the Google Places API.
https://olefirenko.github.io/vue-google-autocomplete/
MIT License
505 stars 258 forks source link

Vue3 Nuxt 2 InvalidKeyMapError error #195

Open Malfunction13 opened 1 year ago

Malfunction13 commented 1 year ago

Hello!

I get the following error on input of address: Google Maps JavaScript API error: InvalidKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error

I am trying to implement the package in a Vue3 project with Nuxt2 and after a little troubleshooting around the issues section i followed the advice some of the users gave and injected it the following way:

nuxt.config.js

script: [{
    head: {
        script: [{
            src: `https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_APY_KEY}&libraries=places
        `}],
},
plugins: [
   { src: "@/plugins/map-places.js", ssr: false },
]

plugins folder in project root - map-places.js

import VueGoogleAutocomplete from 'vue-google-autocomplete';
Vue.use(VueGoogleAutocomplete);
Vue.component('vue-google-autocomplete', VueGoogleAutocomplete)

in the components