Google Map Fullscreen View is not working in Ionic 2 Segments

Question

I have a page using ion-segment which has list and map. Map was displayed correctly but when full screen view is clicked i got a blank screen.Any one can help to give me some hint or solution for this issue?

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>