Use @capacitor/google-maps togehter with @googlemaps/js-api-loader

[AE1NS]

When I use the web implementation of @capacitor/google-maps, I cant use the @googlemaps/js-api-loader plugin in parallel to access i.e. the geometry or places API of google.

I get a Error: Loader must not be called again with different options. because the google maps script cant be implemented more than once. When I run the app on the android device, there is no issue, because the script will only be created by the @googlemaps/js-api-loader plugin.

Is there any solution/idea how both can be compatible in web?

[AE1NS]

Changing
https://github.com/ionic-team/capacitor-plugins/blob/main/google-maps/src/web.ts#L121-L133
to

private async importGoogleLib(apiKey: string) {
  if (this.gMapsRef === undefined) {
    if (window.google?.maps) {
      this.gMapsRef = window.google.maps;
      console.log('Google maps API already loaded');
    } else {
      const lib = await import('@googlemaps/js-api-loader');
      const loader = new lib.Loader({
        apiKey: apiKey ?? '',
        version: 'weekly',
        libraries: ['places'],
      });
      const google = await loader.load();
      this.gMapsRef = google.maps;
      console.log('Loaded google maps API');
    }
  }
}

works. Could this be a possible extension for this plugin or could this cause issues?

[greg-md]

@AE1NS how did you solve the capacitor://localhost CORS issue?

[AE1NS]

We are using a map plugin version that contains this ionic-team/capacitor-plugins#1587 and beside we use this in our main project, without any issues or cors issues:

import { Loader } from '@googlemaps/js-api-loader';
...
const loader = new Loader({
    apiKey: ...,
    version: 'weekly',
})

// example usage of geocoder
const geocoder = new (await loader.importLibrary('geocoding')).Geocoder();

[falconeta]

Hi @greg-md, did you have fix the capacitor://localhost CORS issue? I have the same problem starting with version 3.54

[greg-md]

@falconeta I think I resolved it by adding the capacitor://localhost/* to the allowed websites for the api key, in console. Somehow I got it wrong at start.

[falconeta]

Hi @greg-md i already have this configuration, but the problem still persist... In my case the CORS issue is on the gen_204 and GetViewportInfo endpoints and the error appear at the first time, if I interact with the map (zoom in or zoom out) the successive GetViewportInfo calls maybe got success (or maybe not with the CORS error)