feat: Use functional API of @googlemaps/js-api-loader

Author: A1Jan

plugin/package.json

@@ -91,7 +91,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@googlemaps/js-api-loader": "~1.16.8",
+    "@googlemaps/js-api-loader": "~2.0.2",
     "@googlemaps/markerclusterer": "~2.5.3",
     "@types/google.maps": "~3.58.1"
   }

plugin/src/web.ts

@@ -30,6 +30,7 @@ import type {
   RemovePolylinesArgs,
   RemoveTileOverlayArgs,
 } from './implementation';
+import { importLibrary, setOptions } from '@googlemaps/js-api-loader';
 
 export class CapacitorGoogleMapsWeb extends WebPlugin implements CapacitorGoogleMapsPlugin {
   private gMapsRef: google.maps.MapsLibrary | undefined = undefined;
@@ -121,19 +122,16 @@ export class CapacitorGoogleMapsWeb extends WebPlugin implements CapacitorGoogle
 
   private async importGoogleLib(apiKey: string, region?: string, language?: string) {
     if (this.gMapsRef === undefined) {
-      const lib = await import('@googlemaps/js-api-loader');
-      const loader = new lib.Loader({
-        apiKey: apiKey ?? '',
-        version: 'weekly',
+      setOptions({
+        key: apiKey ?? '',
+        v: 'weekly',
         language,
         region,
       });
-      this.gMapsRef = await loader.importLibrary('maps');
+      this.gMapsRef = await importLibrary('maps');
 
       // Import marker library once
-      const { AdvancedMarkerElement, PinElement } = (await google.maps.importLibrary(
-        'marker'
-      )) as google.maps.MarkerLibrary;
+      const { AdvancedMarkerElement, PinElement } = await importLibrary('marker');
       this.AdvancedMarkerElement = AdvancedMarkerElement;
       this.PinElement = PinElement;