Issue with Google Maps and showmodal() when Cache is active

ionic-v1
1

hi guys. I have an issue with cached views, showmodal and Google Maps.

It turns out that every time is opened a modal window with showmodal() and go back to the map view, the map has disappeared .

That problem only happens when the cache view is true.

A possible trick solution is change the screen orientation and after that, change again the screen orientation to the original orientation. It seems that this approach refresh the cache layer at his last view.

Any clue? thank you in advance.

image
issue_cache_map_and_modalview.jpg2551×1080 206 KB

2

I am having the very same issue! Happens with cache set to true or false. Any suggestions?

image
Map Disappears.gif320×569 2.94 MB 

<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>
3

Yes. Try to put this inside your map Controller

$scope.$on(’$ionicView.afterEnter’, function(e) {
// Prevent destroying map
ionic.trigger(‘resize’);
});

Sometimes the opened infowindow is showing empty content, so in order to fix it, close it with this approach:

$scope.$on('$ionicView.beforeLeave', function(e) { 
     if ( angular.isDefined( map ) ) {
       //Remove the infoWindow if opened
       if ( typeof ($scope.currentInfoWin) != "undefined" ) {  $scope.currentInfoWin.close();  }
     }  
});

I hope you can solve it.

4

Thanks. It didn’t really solve my issue, but its a start. Has anyone else found a reason as to whats happening with the modal to cause the issue?

RGecy