Map not displayed on iOS

[MatteoOstermeier]

Hello all! Unfortunately, I need your help. I've tried following some tipps in other threads, but none of them worked. Thanks a lot in advance!

Describe the bug I have set up this plugin on my ionic capacitor application. it is displayed inside a modal. The implementation for Android and Web is working like a charm.

To Reproduce On iOS, i cannot get it to run properly. The map is not displayed. I tried inspecting the code on safari and the maps element just seems to be empty. The map view is in the foreground, as I could manually set a style:background-color:red and see it. Strange thing is that if i close the modal (and the map.destroy() function is called), the map is shown for a tiny fraction.

I'm getting the following error when the map is created: ⚡️ [log] - center is 50.3142482 ⚡️ [log] - {"lat":50.3142482,"lng":10.8559456} ⚡️ To Native -> CapacitorGoogleMaps create 88537378 ⚡️ TO JS undefined 2023-01-21 22:05:18.936369+0100 App[510:19026] Metal GPU Frame Capture Enabled 2023-01-21 22:05:18.954945+0100 App[510:19026] Metal API Validation Enabled ⚡️ To Native -> CapacitorGoogleMaps addListener 88537379

Expected behavior IThe map shall be displayed like on the other platforms

Screenshots On Web: On Android: On iOS:

Additional context I tried a couple of workarounds (like removing fullscreen=true) or creating the map after a timeout. I also tried setting all backgrounds to transparent like on android, but that only makes the background turn grey. I also tried creating the map on a button click just in case it is rendered too early, but that also did not change anything.

This is ionic info on the MAC I'm building the iOS version with: Ionic:

Ionic CLI : 6.20.8 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 6.5.0 @angular-devkit/build-angular : 15.1.2 @angular-devkit/schematics : 15.1.2 @angular/cli : 15.1.2 @ionic/angular-toolkit : 7.0.0

Capacitor:

Capacitor CLI : 4.6.2 @capacitor/android : 4.6.2 @capacitor/core : 4.6.2 @capacitor/ios : 4.6.2

Utility:

cordova-res : 0.15.4 native-run : 1.7.1

System:

NodeJS : v16.17.0 (/usr/local/bin/node) npm : 9.3.1 OS : macOS Monterey

Relevant part of my code: I'm using a tabs layout. A page is opening up a modal for creating content. This page is opening the modal with the map. Both modal components are declared in a shared components module:

Here is the code opening the Map Modal. (layout.setScanner() was a method I used for setting all backgrounds to transparent. I initially used it for a qr-code scanner, which is also rendered in the background. so sorry for the name).

This is the code of the map component:

HTML:

[tafelnl]

You are most likely using @capacitor/google-maps. You are now in the @capacitor-community/google-maps repository.