AngularJS, AngularUI, Maps Module and ‘page’ reload
I recently came across a painful issue with the Maps module part of AngularUI (the companion suite to the AngularJS framework), and have finally found a solution to it so thought I would share.
The issue is that if you use the <ng-view> directive to load a view with a Map module in it, and you navigate somewhere else within your Single Page App (SPA) and then return back to that map page, the map is off-centre and some maps tiles may not be loaded (instead you just see grey squares).
If you try to make a call to either or both of:
- google.maps.event.trigger($scope.model.myMap, ‘resize’);
or - $scope.model.myMap.setCenter($scope.ll);
then you will probably find that you will get one of the various “$scope.$apply” or “$digest is already in progress” errors, which, whilst they don’t seem to actually cause a problem, aren’t really something you want hanging around.
I finally found the solution from this Stack Overflow post: http://stackoverflow.com/questions/14444625/angularjs-map-via-google-maps-api-v3-in-a-tab
The solution is to wrap your calls to ‘resize’ and ‘setCenter’ in a setTimeout call with any timeout, as follows:
setTimeout(function () {
google.maps.event.trigger($scope.model.myMap, 'resize');
$scope.model.myMap.setCenter($scope.ll);
}, 100);
Who knows why the AngularUI Maps module has this problem, but hopefully this little tip might save you some time if you’re going down a similar path.
Nice!
Comment by Davi | September 16, 2014
what is $scope.ll ?
I need that cause google.maps.event.trigger($scope.model.myMap, ‘resize’); alone for me doesn’t fix the problem even in the timeout!
Let me know!
Comment by manuel | October 31, 2014
$scope.ll is a Google Maps ‘LatLng’ coordinate value/object, which you can create along the following lines:
$scope.ll = new google.maps.LatLng(-37.814107, 144.963280);
Comment by UltraWebsites | October 31, 2014