Google Maps issue, map disappears after modal open

ionic-v1
1

I am having an issue with Google Maps disappearing after I switch views and come back to the view. It only happens after I open up a modal on the detail page.

image
Map Disappears.gif320×569 2.94 MB

I am using ng-maps. Any ideas on whats going wrong? Why only when the modal is opened?

<ng-map id="tour-map" center="[32.432087, -80.670142]" map-type-control-options="{position:'top_left', style:'horizontal_bar', mapTypeIds:['HYBRID','ROADMAP']}" map-type-id="ROADMAP" street-view-control="false" zoom-control="false" rotate-control="false" scale-control="false" zoom="15" min-zoom="8" tilt="0" on-click="vm.hidePopUp()">	<marker ng-repeat="site in siteList" id="{{site.id}}" title="{{site.Name}}" position="{{site.latitude}},{{site.longitude}}" on-click="vm.showPopUp(event, site)"></marker>	<info-window id="PopUp">	<div ng-non-bindable class="outer-div" style="height:80px!important; max-height:80px!important">	<a ng-href="#/app/listView/{{infoW.id}}" style="text-decoration:none!important;">	<div class="inner-div" style="height:100%; width:100%;">	<img ng-src="img/images/{{infoW.ImageThumb}}" style="height:80px; width:80px; float:left; padding-right:10px;">	<div>	<h4 style="margin-top:0; margin-bottom:4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{infoW.Name}}</h4>	<div ng-if="infoW.NameAlt" style="font-size:larger; color:black; font-weight:500; margin-bottom:8px;">"{{infoW.NameAlt}}"</div>	<div>{{infoW.Address}}</div>	</div>	</div>	</a>	</div>	</info-window> </ng-map>
2

This still happens in Ionic 6 on an iPhone 13 Pro with @capacitor/google-maps

3

I would like to leave a comment since I was digging around with the same issue and if somebody has something similar maybe it can be helpful.

I am using Vue, and what happens is that after opening the modal, the element is teleported out, with what I guess is Vue teleport, and the new structure is as follows:

<ion-app>	<ion-router-outlet /> <ion-modal> . . . </ion-modal> </ion-app>

What was a solution for me, is to teleport the map element out to the body element and setting the z-index to -1 as follows:

<body> <div id="app"> <ion-app> <ion-router-outlet /> <ion-modal /> </ion-app> </div> <capacitor-google-maps /> </body> 
capacitor-google-map {	position: fixed;	bottom: 0;	left: 0;	z-index: -1;	display: inline-block;	width: 275px;	height: 400px; }

And now I have a map element, that is under the modal, but not deleted by the modal when it opens.
This issue was dominant on iOS, on android it was working ok.

My versions:

// dependencies in package.json "@capacitor/android": "5.7.0", "@capacitor/app": "5.0.7", "@capacitor/core": "5.7.0", "@capacitor/google-maps": "^5.4.1", "@capacitor/haptics": "5.0.7", "@capacitor/ios": "^5.7.0", "@capacitor/keyboard": "5.0.8", "@capacitor/status-bar": "5.0.7", "@ionic/vue": "^6.7.5", "@ionic/vue-router": "^6.7.5", "vue": "^3.3.0", "vue-router": "^4.2.0"