ionic3 Google地图未显示在导航堆栈中

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>

Answer 1

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 .