Ionic 2, use google maps in ionic segments

Question

I have a little problem. Google maps do not appear in ionic 2 segments, but appear outside of segments. I am using the following code,

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

I tried the following solutions but did not work:

• Use 100% height and width for the outer div.
• use timeout on map load function.

Answer 1

You can try to split the map into your own page and use the selector to load it through the ngSwitch directive. This way you can work with ion hooks such as 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 map.ts / map.html and it will connect to its own navCtrl to have much more flexibility.

Answer 2

I had the same problem as you indicate, Google Maps demonstrates completely external segments. So, following the proposed approach by biranchi125 in the Ionic forum , you can put the map outside the segments and process it when it is shown with a choice variable, for example 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 :)