ionic3 google map not showing in navstack

Question

I can't show google map in ionic 3 application when using tabs with link.

i got 3tabs and in 1 tab i have a link too google map for users.

lets assume my current tab name is AddressPage, when i click on link to show google map , i will go to MapPage with nav.push() and my ion-header loads but i cant see google map in middle of screen and it shows my previous page AddressPage content in middle of map page.

i'm sure i have google map in there because i have a button in ion content that shows the current lat\lng of the marker and it works , but the map is not there.

i used safari to debug the application and when i make all ion-app visibility to none , google map is showing. so i think its some css problem with ionic and google map sdk.

BTW i can show map when i'm not using tabs and its my home page , so i only have this problem in this situation.

Can any1 help me for this? i searched a lot in stackoverflow and ionic forum and i almost did everything i saw on the internet. from adding css like adding nav-decorator css to hide or ....

Thank in advance for any help !

its my ionic info :

ionic (Ionic CLI)  : 4.1.2 (C:\Users\ASUS\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework    : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.0

 ionViewDidLoad() {
    this.isEdit = this.navParams.get('isEdit');
    this.loadMap();
}

this is my map page.ts code

ionViewDidLoad() {
    this.isEdit = this.navParams.get('isEdit');
    this.loadMap();
}

//load the map
loadMap() {
    //google map options
    let mapOptions: GoogleMapOptions = {
        camera: {
            target: this.mapCenter,
            zoom: 16,
            tilt: 10,
        },
        mapTypeId: 'ROADMAP',
        controls: {
            myLocationButton: true,
            zoom: false
        },
    };
    this.map = GoogleMaps.create('map_canvas', mapOptions);
    this.showLoading(null);
    this.map.on(GoogleMapsEvent.MAP_READY)
        .subscribe((resp) => {
            this.hideLoading();

        });

}

this is my map page css

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

this is my map.html

<ion-header>
<ion-navbar>
    <ion-title text-center>
        انتخاب آدرس
    </ion-title>
</ion-navbar>
</ion-header>
 <ion-content>

<div id="map_canvas" >

</div>

</ion-content>

Harry Harry · Accepted Answer · 2018-10-24T07:13:28

When you work with tabs, this solution works for you to visible and hide google map between different tabs.

initialMapLoad: boolean = true;

ngAfterViewInit(){
  this.loadMap();
}

ionViewWillEnter(){
  if (!this.initialMapLoad) {
    // reset div & *then* set visibility to smooth out reloading of map
    this.map.setDiv('map_canvas');
    this.map.setVisible(true);
  } else {
    this.initialMapLoad = false;
  }
}

ionViewWillLeave() {
  // unset div & visibility on exit
  this.map.setVisible(false);
  this.map.setDiv(null);
}

Other than this you can use Google maps Javascript API. It works very well everywhere.

If still, you have any issue, please feel free to comment.

ionic3 google map not showing in navstack

1 Answers