Ionic 2细分不适用于Google Maps

Question

Im trying to implement Google Maps in ionic 2 as Segments (Map and List).

Here is my HTML:

<ion-header>
  <ion-navbar>
    <button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>

  <ion-segment [(ngModel)]="clients">
      <ion-segment-button value="map">
        Map
      </ion-segment-button>
      <ion-segment-button value="list">
        List
      </ion-segment-button>
    </ion-segment>
      </ion-navbar>
</ion-header>
<ion-content>
  <div [ngSwitch]="clients">
    <div *ngSwitchCase="'map'">
        <div #map id="map"></div>
     </div>

    <ion-list *ngSwitchCase="'list'">
      <ion-item>
        <h2>List Item 1</h2>
      </ion-item>


</ion-list>
  </div>
</ion-content>

Here is my .scss file:

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

When i load the App, List segment works fine but Maps appear as white screen. If i define maps div tag right after the ion-content tag, then maps are displayed in both segments. How can i have Maps in 1 segment and List in other segment?

Answer 1

The div which contains the map has a height oh 0 px, so the map is not visible. Change your code to something like that:

<div class="map-wrapper" [ngSwitch]="clients">
    <div *ngSwitchCase="'map'" #map id="map"></div>
</div>

And then set the .map-wrapper class to a height of 100% in your CSS/SASS/LESS.