Google maps not always fully rendering in Ionic

Question

Having trouble with always rendering google maps in my Ionic app. When I first land on a view from a list of items on the previous view, the map always renders in its complete state. However, if I go back to the previous view and tap a different business, or even the same one, it appears as if the map is only rendering 25% of the complete map. I'm having this issue on both the emulator and on my iPhone.

Example

Code

getData.getBusinesses()
    .then(function(data) {
        // get businesses data from getData factory
    })
    .then(function(data) {
        // get businesses photo from getData factory
    })
    .then(function(data) {
        // get some other business stuff
    })
    .then(function() {
        // get reviews for current business from separate async call in reviews factory
    })
    .then(function() {
        // instantiate our map
        var map = new GoogleMap($scope.business.name, $scope.business.addr1, $scope.business.city, $scope.business.state, $scope.business.zip, $scope.business.lat, $scope.business.long);
        map.initialize();
    })
    .then(function() {
        // okay, hide loading icon and show view now
    },
    function(err) {
        // log an error if something goes wrong
    });

What doesn't make sense to me is that I'm using this exact code for a website equivalent of the app, yet the maps fully load in the browser every time. The maps also fully load when I do an ionic serve and test the app in Chrome. I did also try returning the map and initializing it in a following promise, but to no avail.

I've also tried using angular google maps, but the same issue is occurring. I think I might want to refactor my gmaps.js (where I'm creating the Google Maps function) into a directive, but I don't know if that will actually fix anything (seeing as angular google maps had the same rendering issue).

I don't think the full code is necessary, but if you need to see more let me know.

EDIT

It seems that wrapping my map call in a setTimeout for 100ms always renders the map now. So I guess the new question is, what's the angular way of doing this?

Answer 1

I'm seeing similar issues with ng-map in Ionic. I have a map inside of a tab view and upon switching tabs away from the map view and back again, I would often see the poorly rendered and greyed out map as you describe above. Two things that I did that may help fix your issue:

1. Try using $state.go('yourStateHere', {}, {reload: true}); to get back to your view. The reload: true seemed to help re-render the map properly when the map was within the tab's template.

2. After wrapping the map in my own directive, I found the same thing happening again and wasn't able to fix it with the first suggestion. To fix it this time, I started with @Fernando's suggestion and added his suggested $ionicView.enter event to my directive's controller. When that didn't work, I instead added a simple ng-if="vm.displayMap" directive to the <ng-map> directive and added the following code to add it to the DOM on controller activation and remove it from the DOM right before leaving the view.

   function controller($scope) {
       vm.displayMap = true;
       $scope.$on('$ionicView.beforeLeave', function(){
           vm.displayMap = false;
       });
   }
   

Hope that helps.

Answer 2

don't use setTimeout on this! You need to understand that the map is conflicting with the container size or something (example: map is loading while ionic animation is running, like swiping).

Once you understand this, you need to set map after view is completely rendered. Try this on your controller:

$scope.$on('$ionicView.enter', function(){
        var map = new GoogleMap($scope.business.name, 
                                $scope.business.addr1, $scope.business.city, 
                                $scope.business.state, $scope.business.zip,
                                $scope.business.lat, $scope.business.long);
        map.initialize();
});