feat: Google Maps npm library updates (ionic-team#151)

Author: theproducer

README.md

@@ -245,6 +245,25 @@ const MyMap: React.FC = () => {
 export default MyMap;
 ```
 
+You may need to create a `*.d.ts` file for the custom element in React:
+
+```ts
+// custom-elements.d.ts
+
+declare module "react" {
+  namespace JSX {
+    interface IntrinsicElements {
+      "capacitor-google-map": React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      >;
+    }
+  }
+}
+
+export {};
+```
+
 ### Vue
 
 ```vue

example-app-spm/src/custom-elements.d.ts

@@ -1,12 +1,12 @@
-import '@capacitor/google-maps';
-
-declare global {
+declare module "react" {
   namespace JSX {
     interface IntrinsicElements {
-      'capacitor-google-map': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+      "capacitor-google-map": React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      >;
     }
   }
 }
 
 export {};
-

plugin/README.md

@@ -245,6 +245,25 @@ const MyMap: React.FC = () => {
 export default MyMap;
 ```
 
+You may need to create a `*.d.ts` file for the custom element in React:
+
+```ts
+// custom-elements.d.ts
+
+declare module "react" {
+  namespace JSX {
+    interface IntrinsicElements {
+      "capacitor-google-map": React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLElement>,
+        HTMLElement
+      >;
+    }
+  }
+}
+
+export {};
+```
+
 ### Vue
 
 ```vue

plugin/package.json

@@ -69,7 +69,7 @@
     "@typescript-eslint/eslint-plugin": "^8.48.0",
     "@typescript-eslint/parser": "^8.48.0",
     "downlevel-dts": "^0.11.0",
-    "eslint": "^9.39.1",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
     "prettier": "^3.6.2",
@@ -96,8 +96,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@googlemaps/js-api-loader": "~1.16.8",
-    "@googlemaps/markerclusterer": "~2.5.3",
-    "@types/google.maps": "~3.58.1"
+    "@googlemaps/js-api-loader": "^2.0.2",
+    "@googlemaps/markerclusterer": "^2.6.2",
+    "@types/google.maps": "^3.58.1"
   }
 }

plugin/src/web.ts

@@ -122,13 +122,13 @@ 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',
+      lib.setOptions({
+        key: apiKey ?? '',
         language,
         region,
       });
-      this.gMapsRef = await loader.importLibrary('maps');
+
+      this.gMapsRef = await lib.importLibrary('maps');
 
       // Import marker library once
       const { AdvancedMarkerElement, PinElement } = (await google.maps.importLibrary(