I'd like to show GoogleMaps in ion-segment. My code so far:
.html
<ion-header>
<ion-navbar>
<ion-segment [(ngModel)]="dashboard" (change)="onSegmentChanged($event)">
<ion-segment-button value="list">
Liste
</ion-segment-button>
<ion-segment-button value="map">
Karte
</ion-segment-button>
</ion-segment>
</ion-navbar>
</ion-header>
<ion-content>
<div [ngSwitch]="dashboard">
<div *ngSwitchCase="'list'">
some content...
</div>
<div *ngSwitchCase="'map'">
<div #map id="map"></div>
</div>
</div>
.ts
initMap() {
let LatLng = new google.maps.LatLng(52.491114, 13.394625);
let mapOptions = {
center: LatLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
}
onSegmentChanged($event) {
if ($event == 'map') {
this.initMap();
}
}
.scss
#map{
height:100%;
}
It's related to this topic: https://forum.ionicframework.com/t/how-to-call-custom-function-after-ngswitch-new-view-is-created/48461/6
But GoogleMaps is not showing. I'm new to ionic and angular, so I can not find any other solution. Can anybody help- I would really appreciate!