Cordova Admob causing google map rendering "grey" screen in Ionic tabs -

running ionic tabs. maps works fine until click tab , click map. when returning map tab, of map greyed out little bit of map still appearing in upper left corner. if grab visible section of map , drag center view see visible maps 2/3rd of screen - moment let go visible part shoots upper left corner - , greyed out section blank white.

in addition, if rotate device portrait landscape - map redraws correctly. , landscape portrait mode , full maps showing again.

for life of me though, can't 'grey' out happening.

in apps.js:

.run(function($ionicplatform) {   $ionicplatform.ready(function() {     globalgps() ;   }); })  .config(function($stateprovider,$urlrouterprovider) {     '$compileprovider',     function( $compileprovider )     {            $compileprovider.ahrefsanitizationwhitelist(/^\s*(https?||tel):/);         // angular before v1.2 uses $compileprovider.urlsanitizationwhitelist(...)     }   $stateprovider    // setup abstract state tabs directive   .state('tab', {     url: "/tab",     abstract: true,     templateurl: "templates/tabs.html",     controller: 'tabsctrl'   })    // each tab has own nav history stack:   .state('tab.map', {     url: '/map',     views: {       'tab-map': {         templateurl: 'templates/tab-map.html',         controller: 'mapctrl'       }     }   }) 

the gps functions take place outside of state/controllers loaded standard javascript file, , when gps same external function sets map global var:
setmap = new google.maps.map(document.getelementbyid("mapbody"), myoptions);

in controller defined:

   .controller('mapctrl', function($scope,$rootscope,constants) {       // runs code on every return map tab       $scope.$on('$ionicview.beforeenter', function(){         if (setmap) {           google.maps.event.addlistener(setmap, "idle", function(){             google.maps.event.trigger(setmap, "resize");           }) ;           // $scope.refreshmap() ;  // see note below         }       });        $scope.refreshmap = function() {           settimeout(function () {             $scope.refreshmap_();           }, 1);       };        $scope.refreshmap_ = function() {         var div = document.getelementbyid("mapbody");           reattachmap(setmap,div);       }; 

reattachmap() external function:

function reattachmap(map,div) {   if (!isdom(div)) {     return map;   } else {     map.set("div", div);     while(div.parentnode) {       div.style.backgroundcolor = 'rgba(0,0,0,0)';       div = div.parentnode;     }     return map;   } } 

in place of google.maps.event.trigger(setmap, "resize"), tried using reattaching map div thinking had been removed dom. neither method works or indicates onto correct fix. in div's hold maps hard set width/heigh css values had read fixed ppl's issues (whereas width/height percentages causing problem):

  <div id="mapwrapper" style="position:absolute;width:100%;height:100%">     <div id="mapbody" data-tap-disabled="false"></div>     </div>   </div> 

and

#mapbody {   border:2px solid #4e8cf9;   text-align:center;   height:700px;   width:400px;*/   flex: 1; } 

well, solved issue. turns out when moving away map tab tab, other tabs loading ads admob. admob ads not part of main dom, sub-view , persistent. if navigate tab, ad stays in same place on new tab. when navigating map tab, ad follows , somehow interferes google maps ability display itself.

in app, first default view map tab doesn't show ads, no map issues until user returns map tab (...and persistent admob ad followed)

sooo...i used above function remove ad map view completely.

.controller('mapctrl', function($scope,$rootscope,constants) {       $scope.$on('$ionicview.beforeenter', function(){         // function run every time user goes tab         if (setmap) {  // attempt remove ad if 'map' defined           removead() ;  // global external function       });