Why map convas is not appearing in Slide in Ionic 2

Ionic Framework ionic-v3
1

In this code I want to load map on second slide but in second Slide map convas is not appearing

<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>

in scss file

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

.ts file

@Component({
  
  selector: 'page-sample-modal',
  templateUrl: 'sample-modal.html'
})
export class SampleModalPage {
  @ViewChild(Slides) slides: Slides;


  public map;
  bounds: any;
constructor(public viewCtrl: ViewController, public navCtrl: NavController, public navParams: NavParams, public http: Http, public alertCtrl: AlertController) {

  }

  ionViewDidLoad() {
    this.initializeMap()
}
    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);
      }