Ionic 2, use google maps in ion-segments

Question

I have a slight problem. Google maps is not showing in ionic 2 segments but showing outside of segments. I am using the following code,

 <div [ngSwitch]="report_details">
    <div *ngSwitchCase="'details'">
        <div #map id="map"></div>
    </div>
 </div>

I have tried the following solutions but did not work:

1. use height and width of 100% on outer div.
2. use timeout on map load function.

Answer 1

You could try and break the map out into its own page and use the selector to load it in via the ngSwitch directive. That way you could work with the ionic hooks like ionViewDidEnter() and ionViewWillEnter();

in the console.

ionic generate page map

then in your HTML try using something like this.

<div [ngSwitch]="report_details">
    <div *ngSwitchCase="'details'">
       <page-map #map id="map"></page-map>
    </div>
</div>

map.ts

ionicViewDidEnter(){
    // initiate map here
}

then you can do whatever you want in the map.ts/map.html and it will hook onto its own navCtrl in order to have much more flexibility.

Answer 2

I had the same problem as you point out, Google Maps is showing perfectly outside segments. So following the approach suggested by biranchi125 in Ionic forum you can place the map outside the segments and handle when to show it whith the selection variable, like this:

<div [ngSwitch]="report_details">
  <div *ngSwitchCase="'details'">
    <!-- you can place other elements here if you want -->
  </div>
  <div [style.display]="report_details == 'details' ? 'block' : 'none'">
     <div #map id="map"></div>
  </div>
</div>

and it works : )