IONIC 3 - ‹ion-segment› ‹div› Карта Google не отображается

У меня возникла проблема с отображением карты на моей странице. Это мой код:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      Cerca
    </ion-title>
  </ion-navbar>
  <ion-toolbar>
    <ion-segment [(ngModel)]="mySegment">
      <ion-segment-button value="Mapa">
        Mapa
      </ion-segment-button>
      <ion-segment-button value="Lista">
        Lista
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <div [ngSwitch]="mySegment">
    <div #map id="map" style="height:100%;" *ngSwitchCase="'Mapa'" (click)="openBestofferdetailPage(offer)">

    </div>
    <div *ngSwitchCase="'Lista'">
      <button ion-item *ngFor="let offer of offersmodelArray" (click)="openBestofferdetailPage(offer)">
        <ion-thumbnail item-left>
          <img src="{{offer.imageoffer}}">
        </ion-thumbnail>
        <p style="font-size:50%;">
          <ion-row>
            <ion-col>
              <span item-left>{{offer.cityprovider}}</span>
              <span item-left>({{offer.distanceToProvider}} km)</span>
            </ion-col>
            <ion-col right text-right>
              <s>
                <span item-right>{{offer.oldprice}}</span>
              </s>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col>
              <span item-left>{{offer.sold}}</span>
              <span item-left>comprados</span>
            </ion-col>
            <ion-col right text-right>
              <b><p style="font-size:70%;" style="color:green">
        <span item-right>{{offer.newprice}}</span>
      </p></b>
        </ion-col>
        </ion-row>
        </p>
      </button>
    </div>
  </div>
</ion-content>

Опцией по умолчанию является «Mapa», однако она не показывает карту, я думаю, это проблема, связанная с настройкой положения и <ion-segment>, но я был бы признателен за вашу помощь в понимании того, где я могу внести изменения.

В качестве дополнительной информации, если я установлю карту вне содержимого, карта будет отображаться без проблем.

<ion-content padding>
  <div #map id="map" style="height:100%;"></div>
</ion-content>

Я видел связанный вопрос, но без ответа Ionic 2, используйте карты Google в ion -сегменты

Пожалуйста, помогите


person JADSAM    schedule 26.05.2017    source источник
comment
Отображается ли карта, когда вы удаляете *ngSwitchCase='Mapa' из его div?   -  person Akash Nigam    schedule 26.05.2017
comment
Нет, это не так. Кажется, ‹div [ngSwitch]=mySegment› отображается поверх карты, по крайней мере, я так понимаю. Должен быть способ сделать так, чтобы этот ‹div #map id=map style=height:100%;›‹/div› отображался сверху.   -  person JADSAM    schedule 26.05.2017