Ionic capacitor google maps appears over WebView on IOS

Integrated @capacitor/google-maps plugin in an Ionic capacitor application. Plugin is working fine when running the application in browser or in android. But in iOS ionic header is not visible as the plugin renders the map over the WebView.

<ion-content [fullscreen]="true">
<ion-toolbar class="tool" slot="fixed">
<ion-icon
class="back"
name="arrow-back-circle"
(click)="handleDismissMap()"
></ion-icon>
<ion-button
slot="end"
shape="round"
class="action-button"
(click)="handleSaveLocation()"
>
<ion-icon slot="start" name="location-outline"></ion-icon>
Save Location
</ion-button>
</ion-toolbar>
<div id="container">
<capacitor-google-maps id="map" #map></capacitor-google-maps>
</div>
</ion-content>


ion-content {
--background: none;
}

body {
background: none;
}

#container {
width: 100%;
height: 100%;
}

capacitor-google-maps {
width: 100%;
height: 100%;
display: inline-block;
}

ion-toolbar.tool {
padding: 1rem;
--background: transparent;

ion-icon.back {
color: #fff;
font-size: 40px;
margin: 0.4rem 1rem 0 0;
}

ion-button.action-button {
color: #1d4370 !important;
--color: #1d4370 !important;
--background: #fff !important;
font-family: "Gothom Medium" !important;
ion-icon {
color: #1d4370 !important;
}
}
}

Continue reading...