ionic-team / ionic-team/capacitor-google-maps

Google maps not rendering in iOS on Capacitor v8

Open
#161 3 comments 1 reaction 0 assignees View on GitHub
needs reproduction
Dominant language
TypeScript
Stars
32
Forks
47
PR merge metrics
No merged PRs in 30d

Description

## Bug Report

### Plugin(s)

@capacitor/google-maps@8.0.0
@capacitor/core@8.0.0
@capacitor/ios@8.0.0

---

### Capacitor Version

💊 Capacitor Doctor 💊
Latest Dependencies:

@capacitor/cli: 8.0.0
@capacitor/core: 8.0.0
@capacitor/ios: 8.0.0
@capacitor/android: 8.0.0

Installed Dependencies:

@capacitor/core: 8.0.0
@capacitor/ios: 8.0.0
@capacitor/android: 8.0.0

iOS:
Xcode: 15.x
iOS target: iOS 14+
Device tested: Physical iPhone (not simulator)

Node:
v20.x

npm:
v10.x

---

### Platform(s)

iOS (physical device)

---

### Current Behavior

When using @capacitor/google-maps@8.0.0 together with @capacitor/core@8.0.0 on iOS, the map fails to render and stays completely blank, even though:

- GoogleMap.create() resolves successfully
- The map reports as created
- No JavaScript errors are thrown
- No native crash logs are emitted
- The API key is valid and correctly configured

This happens consistently in the following scenarios:

- Running via Xcode (Debug or Release)
- Running via npx cap run ios
- Running on a physical iOS device

The same application worked correctly before upgrading to Capacitor Core 8.

---

### Expected Behavior

The Google Map should render normally inside the element after calling:

```ts
await GoogleMap.create({
id: 'map-id',
element,
apiKey,
config: {
center: { lat, lng },
zoom
}
});
```
As it did in Capacitor 7.x.

### Code Reproduction

Minimal reproduction:

```ts
@Component({
template: `



`,
styles: [`
capacitor-google-map {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
`],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class MapaPage {
@ViewChild('map') mapRef!: ElementRef;

async ionViewDidEnter() {
await GoogleMap.create({
id: 'test-map',
element: this.mapRef.nativeElement,
apiKey: 'VALID_API_KEY',
config: {
center: { lat: 33.6, lng: -117.9 },
zoom: 8
}
});

console.log('Map created successfully');
}
}
```

### Result:
Console logs confirm successful creation

Map remains blank (white / transparent)

No errors or warnings in JS or native logs

### Other Technical Details

The issue does NOT occur when:

- Downgrading Capacitor Core to 7.x
- Using Google Maps JavaScript API as a fallback
- The element has valid width and height
- ResizeObserver callbacks are triggered correctly
- onDisplay / onResize lifecycle hooks are fired internally
- No permission or API key restriction issues

This strongly suggests a regression introduced in Capacitor Core 8, possibly related to:
- Native view layering on iOS
- WebView / native view composition
- Lifecycle or timing changes in Core 8

### Additional Context

Multiple developers have reported similar symptoms after upgrading to Capacitor 8

The issue is silent (no crash, no error), making debugging difficult

Downgrading to Capacitor 7.x restores full functionality

Web fallback using Google Maps JS API works reliably on the same devices

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.