Ionic-framework: bug: $ionicmodal broke ion-view with map

[thiagoaos]

Type: bug

Platform: all

http://codepen.io/thiagoaos/pen/RNBJWE

When i go with another page (page1), open a modal (login) and go back to map page, the map view broke (resize to a smaller sizer). If i don´t open a modal work fine, or if i open a modal in map page works fine too.

[thiagoaos]

I change ionic modal to a regular page and the error not happend. But, when i navigate so many times happened again.

So, i think, Ionic is resizing the map div in some time.

Then i added the code below in init of the controller and fix.

$scope.$on('$ionicView.afterEnter', function(){
  if ( angular.isDefined( $scope.map ) ) {
    google.maps.event.trigger($scope.map, 'resize');
  }
});

http://codepen.io/thiagoaos/pen/QwBeaP
but this feel ugly :(

Is there ionic bug? Why change the view size?

[orthodoc]

+1
I am having the same problem as well.
Like @thiagoaos says, the map view is absent only if a modal is opened, and not otherwise.

For me his hack isn't working either. :(

[orthodoc]

I was able to get it to work by adding cache-view="false" to the ion-view in the map view html file.

Not caching defeats the purpose of maintaining the navigation history, especially for maps with png tiles!

Edit: The map is rendered but there are a lot of side effects:

1. The span classes "default-title" (Back) and the "previous-title" (for me the resource name) are both displayed. Earlier the "previous-title" would replace the "default-title".
2. Plenty of errors are thrown up in the console:
3. TypeError: Cannot read property 'parent' of null, TypeError: Cannot read property '__cleanup' of null
4. Error: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.(this one is related to angular leaflet directive and leaflet)
5. TypeError: Cannot read property '__cleanup' of null
6. TypeError: Cannot read property 'backButtonTextLeft' of null

Its obvious that something is breaking. My knowledge of the inner workings of ionic is poor, and this is as far as I can go.

[mhartington]

Alright, seeing this as well. Doesn't appear in beta 14, will pass this to @adamdbradley

http://codepen.io/mhartington/pen/YPJLvV

[orthodoc]

The same behaviour persists with the 1.0.0-rc1 release as well.

[adamdbradley]

Might be related: https://github.com/driftyco/ionic/commit/4f6d02cfcb2e47e199310ddd8d956b942b1e5443#diff-7b97c82fcd0b68ad5aa66de0811e7b76R151

If you comment out ionic.trigger('resize'); it works again.

[orthodoc]

@adamdbradley, I did comment out that line and removed the cache-view="false", but it didn't go away for me. Same page, one with map and the other one after opening a modal. Am using ionic rc-1, angular-leaflet and google map tiles. As far as titles go, neither are displayed!

[winstef]

@adamdbradley indeed, comenting out ionic.trigger('resize'); did the trick for me.

[orthodoc]

Possible duplicate of #3383, and maybe related to Leaflet/Leaflet#3327

[valdrinkoshi]

confirming the fix suggested by @adamdbradley, removing ionic.trigger('resize'); solves the issue!
I've also tried to set the leaflet map property "trackResize" to false, but that didn't help.

[valdrinkoshi]

I found a fix that doesn't require to modify the ionic code: just trigger the resize event before entering in the view that contains the map!

UPDATE
afterEnter seems to work better (otherwise I get scope.digest already in progress error)

$scope.$on('$ionicView.afterEnter', function() {
  ionic.trigger('resize');
});

[mhartington]

Closing since it looks like there is a solution

[bmatto]

I am having this issue, however in my case it's not a map it's a chart rendered on a canvas. The resize event is triggering some internal redraw on the cached view, which in my case is causing an error on the cart, and subsequently the chart is no longer rendered :(.

The "fix" here does in fact redraw the chart - however i'm still seeing those pesky errors in my console whenever a modal pops up.

[MrHakala]

Any other suggestions for work arounds? None of the above work for me.

[rgecy]

@mhartington Just because a work-around is found does not solve the issue. It did not fix it for me completely. It creates an awkward experience redrawing the map, and if any infowindows are open they are not displayed properly either. My app is very much dependent on the google maps to perform correctly.

Its been very frustarting. I removed the modal completely and works great without it. But would love to have that feature back in as well.

I think this needs to be looked at much closer!

Robert

[BioPhoton]

Think too, that this is not solved yet!!!
The current workaround is not clean at all. My Maps having lots of markers and routes which is not optimal together with this bug.

Please take a closer look at this problem.
THX!!!

[adamwlarson]

I am having a similar issue but after opening up the camera the map seems to resize to an odd size. Forcing a resize event afterEnter does fix the issue for me, but it causes an unnecessary transition.

Another way to recreate it is to get the bug mentioned in issue #6715 unfortunately the fix suggested in that bug does not solve this issue in when it happens without opening the keyboard, but I would be willing to bet it is a similar issue, and if we can track down the cause of all of these it will solve a lot of our issues.

[kperdomo]

Still happening in 2.0.0. Not only with modals, but popovers and popups show the same problem.

Triggering resize on afterEnter event fixes most of the issues, at least the map can be navigated through again. Still, if you get back to a map view where a info window for a marker was being displayed, it appears all messed up (see attached image).

[jefftanz]

This issue is not fixed. Still happens with google map on a modal window. Has anyone solved this?

[ionitron-bot[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 Ionic, please create a new issue and ensure the template is fully filled out.