Google Map全屏视图无法在Ionic 2细分中使用

Question

我有一个使用离子段的页面，它有列表和地图。地图显示正确但是当点击全屏视图时我得到一个空白的屏幕。任何人都可以帮我提一些这个问题的提示或解决方案吗？

page-distributors {

    .map-container{
        height: 100%;
    }

    #map { 
        height: 100%;
        width: 100%;
         }
    
}

<ion-header>
  <ion-navbar color="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>{{title}}</ion-title>
  </ion-navbar>
  <ion-toolbar color="primary" no-border-top>
    <ion-segment color="light" [(ngModel)]="currentView">
      <ion-segment-button value="list">
        <ion-icon name="list"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="map">
        <ion-icon name="map"></ion-icon>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>


<ion-content [ngSwitch]="currentView" class="map_container">

  <ion-list *ngSwitchCase="'list'" class="map_container">
    <ion-item-group *ngFor="let city of distributors | orderBy:'city' | groupBy: 'city'">
      <ion-item-divider>{{city.key}}</ion-item-divider>
      <ion-item text-wrap *ngFor="let distributor of city.value | orderBy: 'title'" (click)="goToDistributor(distributor)">
        {{distributor.title}}
        <ion-icon name="ios-arrow-forward" color="secondary" item-right></ion-icon>
      </ion-item>
    </ion-item-group>
  </ion-list>

  <div *ngSwitchCase="'map'" #map id="map">
  </div>
</ion-content>