Ionic3 google map not showing in navstack

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

this is my map page.ts code

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

//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
    }; = GoogleMaps.create('map_canvas', mapOptions);
        .subscribe((resp) => {



this is my map page css

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

this is my map.html

    <ion-title text-center>
        choose address

<div id="map_canvas" >



Please share your project files on GitHub

1 Like

Hello @wf9a5m75 and thanks for answering in this topic.
i have this project in github , but its if i can have your email i can add you to this project.
Thanks in advanced.

@wf9a5m75 i sent the project link to your gmail.

any update or news on this problem?

Umm, I can’t read Arabic at all. I can’t reach to the map page.

ok let me explain this.
1-in below screen (first screen) , click on the green button .
25 .
2-in the below screen (second page), insert 11111111111 in the input field and click on green button.
(input length must be 11)
3-in the below screen(third page) , insert 12345 in the input field and click on green button.
4-in the below screen (fourth page) , click on blue button and it will push nav to map page and that’s where problem comes.46

please consider this , that it will save a token to device localstorage so next time u wont be able to see this page and u need to remove token(cookies) in order to see this page again.

this page is ok in browser mode and the problem is in android and ios devices.

about the code:
the last image code is in AddressesPage.
and the MapPage is Map page.

finally i was able to solve this problem using this thread:

for anyone having same problem:

the point was i had to hide all navstacks before my google map ,so it can be shown with no problem.

ionViewDidLeave() {
    console.log('did leave');
    document.getElementById('rootpageorsomething').hidden = true;
  ionViewWillEnter() {
    console.log('will enter');
    document.getElementById('rootpageorsomething').hidden = false;