Ionic3 google map not showing in navstack

@mehranReptal wrote:

0 down vote favorite

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>
        choose address
    </ion-title>
</ion-navbar>
</ion-header>
 <ion-content>

<div id="map_canvas" >

</div>

</ion-content>

Posts: 1

Participants: 1

Read full topic