Google maps not rendering in iOS on Capacitor v8 #161
Description
Bug Report
Plugin(s)
@capacitor/[email protected]
@capacitor/[email protected]
@capacitor/[email protected]
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/[email protected] together with @capacitor/[email protected] 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:
await GoogleMap.create({
id: 'map-id',
element,
apiKey,
config: {
center: { lat, lng },
zoom
}
});As it did in Capacitor 7.x.
Code Reproduction
Minimal reproduction:
@Component({
template: `
<ion-content [scrollY]="false">
<capacitor-google-map #map></capacitor-google-map>
</ion-content>
`,
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<HTMLElement>;
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