DEV Community

Discussion on: How To use Google Maps in Nuxt.js Project without Any package or heavy library

View post
Collapse
 
alligatore3 profile image
Mattia Zanella • • Edited

Hey I'm having the same feature to implement in my project and I've made the same steps of you BUT I found that if I navigate to another page and then jump back into your component page this will lead you to this error (of course):

You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.
Enter fullscreen mode Exit fullscreen mode

After a while I came into this solution:

  head() {
    return !window.google
      ? {
          script: [
            {
              hid: 'maps-googleapis',
              src: `https://maps.googleapis.com/maps/api/js?libraries=places&key=${process.env.NUXT_ENV_GOOGLE_PLACES_KEY}`,
              defer: true,
              callback: this.googleAutocompleteInit,
            },
          ],
        }
      : {}
  },
Enter fullscreen mode Exit fullscreen mode
Collapse
 
2jn profile image
Jose Navas •

what does this.googleAutocompleteInit do?

Collapse
 
alligatore3 profile image
Mattia Zanella • • Edited

As far as I can remember something like this (see the code below).