Odd behavior with google maps

ionic-v1
1

I have an ion-view which contains a map or a list. A button allows the user to switch between the two modes. Here is my issue: if the view is initialized to show the map, all is well. But if the view is initialized to show the list, when the button is pressed to switch the map is all cropped up. I forked the tab codepen from ionics to show the behavior: http://codepen.io/anon/pen/OPrvRG. Right now I have it initialized to map mode. Change this line in the JS file:

$scope.viewMode = 'Map';

to

$scope.viewMode = 'List';

to see the issue.

Any idea why this is happening and how to fix it?

Ps: This is (I think) unrelated, but on codepen unless I put an alert when the mode is switched, the mode immediately reverts. On my device this doesn’t happen. So I wouldn’t worry about it unless you think it is related.

2

I guess under the covers maps is thinking its div size is changing. So I figured I need to issue a resize event in my changeViewMode method. That didn’t work. I figured maybe the event is/was being fired too early before the angular directives had displayed the div and rendered it. So a concurrency issue of sorts. So I used the $timeout service and delayed the resize event by 100ms. That seems to have done the trick. Could be a klugy fix, so if any better ideas out there do let me know.

 $scope.changeViewMode = function(){
    if ($scope.viewMode == 'Map'){
        $scope.viewMode = 'List';
    }
    else {
        $scope.viewMode = 'Map';   
        $timeout(function(){
            google.maps.event.trigger($scope._map, 'resize');            
        }, 100);
    }
};