Ionic3 google map not showing in navstack

Ionic Framework ionic-v3
1

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');
    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>
2

Please share your project files on GitHub

1 Like
3

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

4

@wf9a5m75 i sent the project link to your gmail.
Thanks

5

any update or news on this problem?

6

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

7

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)
32
3-in the below screen(third page) , insert 12345 in the input field and click on green button.
40
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.

8

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;
  }

thanks.