Map doesn't display after changing root page

[paulsson]

Short description of the problem:

When the initial tabs page displays you can navigate around to all the tabs fine, including the "Map" tab and the map will display fine. BUT if you click the menu and navigate to the "Login" or "Signup" page (any page that changes the NavController root page) and then navigate back to the Tabs page and visit the Map page the google map won't load.

What behavior are you expecting?

Expecting the map to load and display properly after the NavController root page is swapped around.

Steps to reproduce:

1. Open app and visit the "Map" page (map loads as expected)
2. Click menu and visit the Login page
3. Click menu and navigate back to the "Map" page (map does not load)

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)
No errors in the javascript console

Run ionic info from terminal/cmd prompt: (paste output below)
This is the behavior of the conference app I loaded from the Android Play store.

I have the same issue in the app I am writing as well using:

Your system information:

Cordova CLI: 6.2.0
Ionic Framework Version: 2.0.0-beta.9
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Mac OS X Mavericks
Node Version: v5.11.1
Xcode version: Not installed

[joshreisner]

+1

This a great resource. I'm looking forward to seeing how it's fixed, because I'm having the same issue as well.

[paulsson]

There is a topic in the Ionic forum about this problem as well without any solution provided. I've posted there as well to try to get visibility on this issue.
https://forum.ionicframework.com/t/blank-google-maps-after-navigation/51104

[brandyscarney]

Thanks for the issue! We'll look into this soon. In the meantime, please continue to post any more details you find. Thanks! 😄

[ddellamico]

I think it's necessary to add map resize trigger :

google.maps.event.trigger(this.map, 'resize');

It must be called every time you enter in that page.
Please, take a look here :

https://github.com/ddellamico/ionic-conference-app/blob/master/app/pages/map/map.ts

[alfabetagama]

Nice save ddellamico.

[peterarends]

Well done @ddellamico! For people that are searching for it like me, this also fixes the map not working in Safari (OS X and on iOS 9.3). That one needs a resize too.

[AbuHani]

same issue any updates ?

[brandyscarney]

I'm not able to reproduce this anymore so I am going to close the issue. Please let me know if it's still an issue and I'll reopen. Thanks!

[Sam747]

In ionic 1 I am still facing the same issue . Any workaround atleast ?

[fkamlesh]

Hello All,
I'm facing same issue, Please help.

[Sam747]

@fkamlesh $scope.$on('$ionicView.enter', function(e) { initAutocomplete(); })

[ichand007]

I am having the same issue with ionic1. the interesting fact is, when it is in debug mode (web render : ionic serve --lab)
editing code inside given controller and saving causes map getting loaded .However I have tried different way to solve this matter, including following ways.

1. using google.maps.event.addListenerOnce()
2. using $scope.$on('$ionicView.beforeEnter', function() { // use google map code here. });
3. google.maps.event.trigger(map, 'resize');
4. trying to re-render content

it works as expected when the map is loaded as root page level. But once it is implemented as sub pages(child state), it does not work.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of the Ionic Conference App, please create a new issue and ensure the template is fully filled out.