Skip to content

feat: Google Maps npm library updates #151

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
theproducer merged 3 commits into from
Dec 3, 2025
Merged

feat: Google Maps npm library updates #151

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
40be33b
more npm version updates
theproducer Dec 2, 2025
3be18b3
fixing example app typing error
theproducer Dec 2, 2025
e6f6e3d
Adding document note about JSX d.ts file
theproducer Dec 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
10 changes: 5 additions & 5 deletions example-app-spm/src/custom-elements.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {};

19 changes: 19 additions & 0 deletions plugin/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 4 additions & 4 deletions plugin/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -95,8 +95,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"
}
}
8 changes: 4 additions & 4 deletions plugin/src/web.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Comment on lines +125 to +131
Copy link
Contributor

@OS-pedrogustavobilro OS-pedrogustavobilro Dec 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: Looks like this ends up addressing #147 (for which there was an alternative PR, that I guess becomes obsolete if this gets merged).

The PR title may need a rename because of this - explicitly mention updates to google maps, mention refactor of loader? Idk, I'll leave it to you @theproducer heh


// Import marker library once
const { AdvancedMarkerElement, PinElement } = (await google.maps.importLibrary(
Expand Down
Loading