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:

[Tafel]

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