Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vue3 Nuxt 2 InvalidKeyMapError error #195

Open
Malfunction13 opened this issue Mar 21, 2023 · 1 comment
Open

Vue3 Nuxt 2 InvalidKeyMapError error #195

Malfunction13 opened this issue Mar 21, 2023 · 1 comment

Comments

@Malfunction13
Copy link

Malfunction13 commented Mar 21, 2023

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 as described in the example

        <h3 class="title is-4">Start typing an address and below you will see found result,
          <a v-on:click="$refs.address.geolocate()">or force current location</a>
        </h3>
        <vue-google-autocomplete
          id="map"
          ref="address"
          classname="input"
          placeholder="Start typing"
          v-on:placechanged="getAddressData"
          v-on:error="handleAddressError"
          country="sg"
        >
        </vue-google-autocomplete>

Of course I double checked if the key is correct, which would be highly unlikely to be incorrect because it was copy-pasted.
I have generated 2 keys and they look different:
The first key that has no attached billing details to it looks like 'AIzaSyD5D...' *note doesnt have a dash
The 2nd key with set billing info is starts like this 'AIzaSyC-NBGh....'

Any ideas how could this be fixed?

@Malfunction13
Copy link
Author

Fellow developers, whoever faces this issue in the future just try deleting and re-creating the api key as it seems INDEED that dash was badly generated key from google's side and something simple as re-generating the key fixes the issue.
Peace.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant