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

[mrleblanc101]

In Nuxt I have this error, I can check for window.google before loading, but should the plugin handle this all on it's own ?

[Orrison]

@mrleblanc101 would you mind sharing how you fixed this on your end. I have the same issues in the VueJS, Laravel, InertiaJS app and get the same issue when going back to a page that loaded previously.

Thank you!

[mrleblanc101]

Use the official @googlemaps/js-api-loader

[popcorn245]

I dunno, if there are others struggling with this still, but the work-around is to pass back google maps from the window if it exists, then if not load it, and wait for it to load before trying to check again.

  sleep(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms));
  }

  async loadGoogleMaps(options?: LoaderOptions) {
    if (window?.google) return window.google;
    if ((window as any)?._dk_google_maps_loader_cb) {
      await this.sleep(200);
      return this.loadGoogleMaps();
    }
    try {
      const loader = new Loader(this.googleMapsKey, {
        libraries: ["places"],
        ...options,
      });

      return loader.load();
    } catch (e) {
      console.log(e);
      setTimeout(this.loadGoogleMaps.bind(this), 2000);
    }
  }