How should I use this with Place Autocomplete?

[FamilyMan]

At the moment I am using this package along with vue-google-maps-community-fork. I only use the community fork for the autocomplete functionality, but when I do this I get "You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.". I don't use the community fork version of map because there are several issues with it. If anyone can give me a solution of using autocomplete with vue3-google-map in Nuxt 3, it would be greatly appreciated.

[GianpaoloPascasi]

Yes, the problem is that you are importing "window wise" the GMaps Api and the another time locally.
The solution is to load the PlacesAPI (and the Autocomplete too) is using a loader, also the same used by the library.
The code is as simple as follows:

• first import the library
  import { Loader } from "@googlemaps/js-api-loader";
• and then in the method you need, or you can also store it in the setup or wherever:

const loader = new Loader({
      apiKey: this.gMapsApiKey,
    });

const placesLibrary = await loader.importLibrary("places");

const rideFromAutocomplete = new placesLibrary.Autocomplete(
   this.$refs.rideFrom as HTMLInputElement,
);

I think that this solution is also more elegant 😄