Cordova Admob verursacht Google Map Rendering "graue" Bildschirm in Ionic Tabs

Question

Ausführen von ionischen Tabs. Meine Karten funktionieren einwandfrei, bis ich auf einen anderen Tab klicke und dann zurück auf die Karte klicke. Wenn Sie zum Map-Tab zurückkehren, ist der größte Teil der Karte ausgegraut und die Karte erscheint immer noch in der oberen linken Ecke. Wenn ich den sichtbaren Bereich der Karte schnappe und in die mittlere Ansicht ziehe, sehe ich, dass die sichtbaren Karten etwa 2/3 des Bildschirms sind - aber in dem Moment, in dem ich loslasse, schießt der sichtbare Teil zurück zur oberen linken Ecke - und jetzt alle vorher ausgegrauter Abschnitt ist nur ein leeres Weiß.

Zusätzlich, wenn ich einfach mein Gerät von Hochformat zu Querformat drehen - die Karte zeichnet sich vollständig neu. Und dann von Landschaft zurück zu Porträtmodus und die vollständigen Karten werden wieder angezeigt.

Für das Leben von mir, kann ich nicht das "Grau" aus dem Geschehen zu bekommen.

In meinem 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 an abstract state for the tabs directive 
    .state('tab', { 
    url: "/tab", 
    abstract: true, 
    templateUrl: "templates/tabs.html", 
    controller: 'TabsCtrl' 
    }) 

    // Each tab has its own nav history stack: 
    .state('tab.map', { 
    url: '/map', 
    views: { 
     'tab-map': { 
     templateUrl: 'templates/tab-map.html', 
     controller: 'MapCtrl' 
     } 
    } 
    }) 

die GPS-Funktionen stattfinden, außerhalb des staatlichen/Controller von einer Standard-Javascript-Datei geladen wird, und wenn alle GPS, die gleiche externe Funktion die Karte als globalen Sets var:
setMap = new google.maps.Map(document.getElementById("mapBody"), myOptions);

In meinem Controller definiert:

.controller('MapCtrl', function($scope,$rootScope,constants) { 
     // runs this code on EVERY return to 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 () Ist eine externe Funktion:

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; 
    } 
} 

Anstelle des google.maps.event.trigger (setMap, „die Größe“), habe ich versucht, mit der Karte div reattaching denken, es aus dem DOM entfernt worden war. Keine der beiden Methoden funktioniert oder zeigt sogar an, dass ich die richtige Lösung gefunden habe. In meinem divs, die Karten, die ich auch hart eingestellt Breite/heigh CSS-Werte, wie ich gelesen hatte, halten, dass einige ppl Fragen festgelegt (wobei Breite/Höhe Prozentsätze wurde das Problem verursacht):

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

und

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

Answer 1

Nun, ich habe das Problem gelöst. Wenn diese Tabs von der Kartenregisterkarte zu einer anderen Registerkarte wechseln, werden sie von AdMob geladen. AdMob-Anzeigen sind kein Teil des Haupt-DOM, sie sind eine Unteransicht und daher persistent. Wenn Sie zu einem anderen Tab wechseln, bleibt die Anzeige an der gleichen Stelle auf dem neuen Tab. Wenn Sie zurück zur Kartenregisterkarte navigieren, folgt die Anzeige und beeinträchtigt die Fähigkeit von Google Maps, sich ordnungsgemäß anzuzeigen.

In meiner app, die erste Standardansicht der Karte Registerkarte, die Anzeigen nicht angezeigt, so dass keine Karte Probleme, bis der Benutzer wieder die Map Registerkarte (... und die anhaltende AdMob gefolgt)

Sooo ... habe ich jetzt die obige Funktion benutzt, um die Anzeige komplett aus der Kartenansicht zu entfernen.

.controller('MapCtrl', function($scope,$rootScope,constants) { 
     $scope.$on('$ionicView.beforeEnter', function(){ 
     // this function will run EVERY time user goes back to this tab 
     if (setMap) { // only attempt to remove ad if 'map' is defined 
      removeAd() ; // global external function 
     });