Cordova Admob вызывает Google карту рендеринга "серый" экран в ионных вкладках

Question

Запуск ионных вкладок. Мои карты работают нормально, пока я не нажму на другую вкладку и не вернусь к карте. При возврате на вкладку карты большая часть карты отображается серым цветом, а в левом верхнем углу все еще отображается небольшая часть карты. Если я беру видимый участок карты и перетаскиваю его в центр, я вижу, что видимые карты находятся примерно на 2/3 экрана - но в тот момент, когда я отпускаю видимую часть, она снова поднимается в верхний левый угол - и теперь все ранее выделенный серым цветом раздел - просто пустой белый.

Кроме того, если я просто поверну свое устройство от портрета до пейзажа - карта полностью перерисовывается правильно. А затем из пейзажа обратно в портретный режим и снова отображаются полные карты.

Хотя для жизни я не могу избавиться от "серого".

В моем 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'
      }
    }
  })

Функции gps выполняются вне состояний / контроллеров, загруженных из стандартного файла javascript, и когда все те же внешние функции gps устанавливают карту как глобальную переменную:
setMap = new google.maps.Map(document.getElementById("mapBody"), myOptions);

В моем контроллере определено:

   .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 () является внешней функцией:

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

Вместо google.maps.event.trigger(setMap, "resize") я попытался повторно присоединить div карты, думая, что он был удален из DOM. Ни один из методов не работает или даже не указывает на правильное исправление. В моих div, которые содержат карты, я даже жестко установил значения ширины / высоты css, поскольку я читал, что исправил некоторые проблемы с ppl (тогда как процент ширины / высоты вызывал проблему):

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

а также

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

Answer 1

Ну, я решил проблему. Оказывается, при переходе от вкладки карты к другой вкладке эти другие вкладки загружают рекламу AdMob. Рекламные объявления AdMob не являются частью основного DOM, они представляют собой дочернее представление и, следовательно, они являются постоянными. Если вы перейдете на другую вкладку, объявление останется на том же месте на новой вкладке. При переходе обратно на вкладку карты объявление следует и каким-то образом мешает способности карт Google правильно отображать себя.

В моем приложении первое представление по умолчанию - это вкладка "Карта", на которой не отображаются объявления, поэтому не возникает проблем с картой до тех пор, пока пользователь не вернется на вкладку "Карта" (... и последовало постоянное объявление AdMob)

Ооочень... я теперь использовал вышеупомянутую функцию, чтобы полностью удалить рекламу из вида карты.

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