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"