cannot get rid of map or change size on iOS

[koleck]

Describe the bug
The map doesn't resize and is stuck at the top of screen, hiding the underneath content. Is not removed when changing tab, even though .destroy is implemented.

iOS 16.3.1

code:
tab1.page.ts
#tried both of these
ngOnInit(){
this.mapservice.createMap(this.mapView);
}

ionViewDidEnter() {
this.mapservice.createMap(this.mapView);

}

mapservice.service.ts
async createMap(element: ElementRef) {
this.newMap = await GoogleMap.create({
id: 'map',
element: element.nativeElement,
apiKey: this.key,
config: {
center: {
lat: 58,
lng: 18,
},
zoom: 10,
},
});

}

destroy() {
#tried both of these
CapacitorGoogleMaps.close()
this.newMap.destroy();
}

tab1.page.html
<ion-header [translucent]="true">


Find your location




<capacitor-google-map #map>

Date: {{date}}

Your longitude is: {{mapservice.long}}

Your latitude is: {{mapservice.lat}}

Find your location!

.... code continues...

tab1.page.scss
.map-container{
text-align: center;
color: plum;
}
capacitor-google-map {
display: inline-block;
height: 50%;
width: 100%;
}

Expected behavior
be able to resize based on css
not to be stuck at top
to be able to remove map when changing tab

Screenshots

[tafelnl]

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