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

Author: A1Jan

plugin/package.json

@@ -95,7 +95,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

@@ -1,6 +1,12 @@
 import { WebPlugin } from '@capacitor/core';
-import type { Cluster, onClusterClickHandler } from '@googlemaps/markerclusterer';
-import { MarkerClusterer, SuperClusterAlgorithm } from '@googlemaps/markerclusterer';
+import type {
+  Cluster,
+  onClusterClickHandler,
+} from '@googlemaps/markerclusterer';
+import {
+  MarkerClusterer,
+  SuperClusterAlgorithm,
+} from '@googlemaps/markerclusterer';
 
 import type { Marker, TileOverlay } from './definitions';
 import { MapType, LatLngBounds } from './definitions';
@@ -30,11 +36,18 @@ import type {
   RemovePolylinesArgs,
   RemoveTileOverlayArgs,
 } from './implementation';
+import { importLibrary, setOptions } from '@googlemaps/js-api-loader';
 
-export class CapacitorGoogleMapsWeb extends WebPlugin implements CapacitorGoogleMapsPlugin {
+export class CapacitorGoogleMapsWeb
+  extends WebPlugin
+  implements CapacitorGoogleMapsPlugin
+{
   private gMapsRef: google.maps.MapsLibrary | undefined = undefined;
-  private AdvancedMarkerElement: typeof google.maps.marker.AdvancedMarkerElement | undefined = undefined;
-  private PinElement: typeof google.maps.marker.PinElement | undefined = undefined;
+  private AdvancedMarkerElement:
+    | typeof google.maps.marker.AdvancedMarkerElement
+    | undefined = undefined;
+  private PinElement: typeof google.maps.marker.PinElement | undefined =
+    undefined;
   private maps: {
     [id: string]: {
       element: HTMLElement;
@@ -109,7 +122,10 @@ export class CapacitorGoogleMapsWeb extends WebPlugin implements CapacitorGoogle
     return '';
   }
 
-  private getIdFromMarker(mapId: string, marker: google.maps.marker.AdvancedMarkerElement): string {
+  private getIdFromMarker(
+    mapId: string,
+    marker: google.maps.marker.AdvancedMarkerElement,
+  ): string {
     for (const id in this.maps[mapId].markers) {
       if (this.maps[mapId].markers[id] == marker) {
         return id;
@@ -119,21 +135,24 @@ export class CapacitorGoogleMapsWeb extends WebPlugin implements CapacitorGoogle
     return '';
   }
 
-  private async importGoogleLib(apiKey: string, region?: string, language?: string) {
+  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(
+      const { AdvancedMarkerElement, PinElement } = await importLibrary(
         'marker',
-      )) as google.maps.MarkerLibrary;
+      );
       this.AdvancedMarkerElement = AdvancedMarkerElement;
       this.PinElement = PinElement;
 
@@ -183,7 +202,8 @@ export class CapacitorGoogleMapsWeb extends WebPlugin implements CapacitorGoogle
   }
 
   async enableTrafficLayer(_args: TrafficLayerArgs): Promise<void> {
-    const trafficLayer = this.maps[_args.id].trafficLayer ?? new google.maps.TrafficLayer();
+    const trafficLayer =
+      this.maps[_args.id].trafficLayer ?? new google.maps.TrafficLayer();
 
     if (_args.enabled) {
       trafficLayer.setMap(this.maps[_args.id].map);
@@ -273,7 +293,10 @@ export class CapacitorGoogleMapsWeb extends WebPlugin implements CapacitorGoogle
 
     const customMapOverlay = new google.maps.ImageMapType({
       getTileUrl: function (coord, zoom) {
-        return tileOverlay.url.replace('{x}', `${coord.x}`).replace('{y}', `${coord.y}`).replace('{z}', `${zoom}`);
+        return tileOverlay.url
+          .replace('{x}', `${coord.x}`)
+          .replace('{y}', `${coord.y}`)
+          .replace('{z}', `${zoom}`);
       },
       tileSize: new google.maps.Size(256, 256),
       opacity: tileOverlay.opacity,
@@ -295,7 +318,10 @@ export class CapacitorGoogleMapsWeb extends WebPlugin implements CapacitorGoogle
     }
 
     for (let i = 0; i < map.overlayMapTypes.getLength(); i++) {
-      if (map.overlayMapTypes.getAt(i) === this.maps[_args.id].tileOverlays[_args.tileOverlayId]) {
+      if (
+        map.overlayMapTypes.getAt(i) ===
+        this.maps[_args.id].tileOverlays[_args.tileOverlayId]
+      ) {
         map.overlayMapTypes.removeAt(i);
         delete this.maps[_args.id].tileOverlays[_args.tileOverlayId];
         break;
@@ -323,7 +349,10 @@ export class CapacitorGoogleMapsWeb extends WebPlugin implements CapacitorGoogle
   }
 
   async addMarker(_args: AddMarkerArgs): Promise<{ id: string }> {
-    const advancedMarker = this.buildMarkerOpts(_args.marker, this.maps[_args.id].map);
+    const advancedMarker = this.buildMarkerOpts(
+      _args.marker,
+      this.maps[_args.id].map,
+    );
 
     const id = '' + this.currMarkerId;
 
@@ -513,13 +542,17 @@ export class CapacitorGoogleMapsWeb extends WebPlugin implements CapacitorGoogle
     delete this.maps[_args.id];
   }
 
-  async mapBoundsContains(_args: MapBoundsContainsArgs): Promise<{ contains: boolean }> {
+  async mapBoundsContains(
+    _args: MapBoundsContainsArgs,
+  ): Promise<{ contains: boolean }> {
     const bounds = this.getLatLngBounds(_args.bounds);
     const point = new google.maps.LatLng(_args.point.lat, _args.point.lng);
     return { contains: bounds.contains(point) };
   }
 
-  async mapBoundsExtend(_args: MapBoundsExtendArgs): Promise<{ bounds: LatLngBounds }> {
+  async mapBoundsExtend(
+    _args: MapBoundsExtendArgs,
+  ): Promise<{ bounds: LatLngBounds }> {
     const bounds = this.getLatLngBounds(_args.bounds);
     const point = new google.maps.LatLng(_args.point.lat, _args.point.lng);
     bounds.extend(point);
@@ -547,7 +580,11 @@ export class CapacitorGoogleMapsWeb extends WebPlugin implements CapacitorGoogle
     );
   }
 
-  async setCircleListeners(mapId: string, circleId: string, circle: google.maps.Circle): Promise<void> {
+  async setCircleListeners(
+    mapId: string,
+    circleId: string,
+    circle: google.maps.Circle,
+  ): Promise<void> {
     circle.addListener('click', () => {
       this.notifyListeners('onCircleClick', {
         mapId: mapId,
@@ -557,7 +594,11 @@ export class CapacitorGoogleMapsWeb extends WebPlugin implements CapacitorGoogle
     });
   }
 
-  async setPolygonListeners(mapId: string, polygonId: string, polygon: google.maps.Polygon): Promise<void> {
+  async setPolygonListeners(
+    mapId: string,
+    polygonId: string,
+    polygon: google.maps.Polygon,
+  ): Promise<void> {
     polygon.addListener('click', () => {
       this.notifyListeners('onPolygonClick', {
         mapId: mapId,
@@ -567,7 +608,11 @@ export class CapacitorGoogleMapsWeb extends WebPlugin implements CapacitorGoogle
     });
   }
 
-  async setPolylineListeners(mapId: string, polylineId: string, polyline: google.maps.Polyline): Promise<void> {
+  async setPolylineListeners(
+    mapId: string,
+    polylineId: string,
+    polyline: google.maps.Polyline,
+  ): Promise<void> {
     polyline.addListener('click', () => {
       this.notifyListeners('onPolylineClick', {
         mapId: mapId,
@@ -669,20 +714,26 @@ export class CapacitorGoogleMapsWeb extends WebPlugin implements CapacitorGoogle
       });
     });
 
-    map.addListener('click', (e: google.maps.MapMouseEvent | google.maps.IconMouseEvent) => {
-      this.notifyListeners('onMapClick', {
-        mapId: mapId,
-        latitude: e.latLng?.lat(),
-        longitude: e.latLng?.lng(),
-      });
-    });
+    map.addListener(
+      'click',
+      (e: google.maps.MapMouseEvent | google.maps.IconMouseEvent) => {
+        this.notifyListeners('onMapClick', {
+          mapId: mapId,
+          latitude: e.latLng?.lat(),
+          longitude: e.latLng?.lng(),
+        });
+      },
+    );
 
     this.notifyListeners('onMapReady', {
       mapId: mapId,
     });
   }
 
-  private buildMarkerOpts(marker: Marker, map: google.maps.Map): google.maps.marker.AdvancedMarkerElement {
+  private buildMarkerOpts(
+    marker: Marker,
+    map: google.maps.Map,
+  ): google.maps.marker.AdvancedMarkerElement {
     if (!this.AdvancedMarkerElement || !this.PinElement) {
       throw new Error('Marker library not loaded');
     }