为什么地图convas没有出现在幻灯片2中

Question

在此代码中，我想在第二张幻灯片上加载map，但在第二张Slide地图convas中没有显示

<ion-content>
  <ion-slides>
  <ion-slide>
  <ion-row>
    <ion-col>
      <ion-item>
        <ion-label>{{Origin}}</ion-label>
      </ion-item>
    </ion-col>
    </ion-row>
  <ion-row>
    <ion-col>
      <ion-item>
        <ion-label> {{Target}} </ion-label>
      </ion-item>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col width-40>
      <ion-item>
        <ion-label>{{name}} </ion-label>
      </ion-item>
    </ion-col>
    <ion-col width-50>
      <ion-item>
        <ion-label> :{{tel}}</ion-label>
      </ion-item>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col width-70>
      <button ion-button block outline color="secondary" (click)="Getorder()" large>Get Order</button>
    </ion-col>
    <ion-col>
      <ion-item>
        <ion-label>{{price}} </ion-label>
      </ion-item>
    </ion-col>
  </ion-row>
</ion-slide>

  <ion-slide>
  <div id="map_canvas"> </div>
  </ion-slide>
</ion-slides>

</ion-content>

scss文件中的

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

更新：在ts文件中

initializeMap() {
    this.map = new google.maps.Map(document.getElementById('map_canvas'), {
      mapTypeControl: false,
      streetViewControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var trafficLayer = new google.maps.TrafficLayer();
    trafficLayer.setMap(this.map);

    this.bounds = new google.maps.LatLngBounds();
    this.map.fitBounds(this.bounds); //# auto - zoom
    this.map.panToBounds(this.bounds); //# auto-center
    this.OriginMarker(this.start_point);
    this.TargetMarker(this.end_point);
  }