Google maps, map disappearing after page transition (is routing/ionicView event a bit foobar-ed?)

I’ve taken the standard maps nightly example on codepen:

And inserted it into a multipage app, I’ve put in a whole load of logic to load up google loader then google maps then the map itself on the relevant page. This all works perfectly, until you go to another page and come back???

I’ve got tests in to make sure that google loader and google maps and the map have loaded and aren’t reloaded when you reenter the page with the map. This is fine. I’m also storing the google maps map object that gets created in a $rootScope object. I can recover the map by doing a bit of a hack by appending the googlemap.getDiv() onto the div on every $ionicView.enter, but it’s a bit horrible.

The second option is to store the map object in a $scope object, and test for the existence of the scope object and create the object on non-existence, so…

if($scope.map===undefined){
mapOptions{blah blah blah};
$scope.map = new google.maps.Map(document.getElementById(“map”),mapOptions);
}

but the $scope.map is always undefined on reentry to page. I’m starting to wonder if this is a page cache thing, but I thought the default behaviour was all pages and scopes are cached unless you specify otherwise???

EDIT: Creating a plunker to see if I can demonstrate it…

Ok, this:

http://embed.plnkr.co/fran34/preview

demonstrates my point.

Every time you enter the map page, it creates a new map. If you turn off the logic to check for $scope.map===undefined and make it purposefully only load the map once on re-entry to the page the map is not there, but you can store the map in the rootscope and reapply it to the div. But I don’t see why I should do this??? The map should just stay in the div???

for something like this you could build the map div externally and only add it to the dom if you try to open the page.
So you would reuse the whole map everytime.

Like build a direktive that hangs on body-tag --> this directive builds the map div, but only hangs it in the dom, if you enter oder start entering a specific state.

I’m also wondering if it’s something like I need to $compile in the google maps added code into the scope?

Alsoooo… http://ionicframework.com/docs/nightly/api/directive/ionView/

Why is the “loaded” event firing on every entry to the page???

Open your console to follow the console logging, you will see it loads on every entry, which according to the docs is incorrect?

OK this is strange, I seem to be getting something similar to this…

But I’m not using the rootScope (as such) in the actual page controllers (just the AppCtrl), so it doesn’t do what the suggested codepen does:

Instead I’ve stripped all the map loading on the map page and what it does is only fire loaded once on home, but on every entry of mapCtrl???

http://embed.plnkr.co/rjQs2S/preview

The only notable difference I can see between the two is one has a side menu and the other doesn’t. Is this a bug with ionic page events and the state provider?

EDIT: Seriously what the heck???

http://embed.plnkr.co/9fraA4/

Console output:

Loading: home
Entering: home
Loading: map
Entering: map
Loading: test
Entering: test
Entering: home
Entering: map
Entering: test
Entering: map
Loading: test <-- loads test again
Entering: test
Entering: home
Entering: map
Entering: test
Entering: map
Entering: home
Loading: map <-- loads map again
Entering: map
Loading: test <-- loads test again
Entering: test
Entering: map
Entering: home
Loading: test<-- loads test again
Entering: test

I’ve also released the example on the codepen doesn’t “really” work, here is my version of it with clearer console logging:

Page1Ctrl loaded
Page1Ctrl entered
Page2Ctrl loaded
Page2Ctrl entered
Page3Ctrl loaded
Page3Ctrl entered
Page1Ctrl entered
Page2Ctrl entered
Page3Ctrl entered
Page1Ctrl entered
Page3Ctrl entered
Page2Ctrl entered
Page1Ctrl loaded <-- loaded again
Page1Ctrl entered
Page3Ctrl loaded <-- loaded again
Page3Ctrl entered
Page2Ctrl loaded <-- loaded again
Page2Ctrl entered
Page1Ctrl loaded <-- loaded again
Page1Ctrl entered
Page2Ctrl loaded <-- loaded again
Page2Ctrl entered
Page3Ctrl loaded <-- loaded again
Page3Ctrl entered
Page1Ctrl entered
Page2Ctrl entered

AAAAaaaaAAAh… I just noticed, the thing that seems to be true of the plunker and codepen code base is it seems like returning to the “Home” or “Page1” seems to reset the app almost and it starts reloading pages??? Is that intended functionality??? It can’t be as it doesn’t seem to do it “all” the time.

I can even duplicate the bug(?) above. go to the codepen url, go forward through page 2,3,1,2,3,1,2,3,1 then back 3,2,1 <- at this point page 1 will reload

I’m wondering whether I’m hitting the same problem as this:

But just trying to figure it out. My adjustment of @brandyshea’s codepen suggests it’s not just an abstract state thing though?

Basically fixed it by caching the map to a variable then reapplying the div and trigger a google maps resize before page load

It’s pretty hack-y but it works.

1 Like

Please provide a plunker or codepen, as I don’t understand your workaround.