Blog >

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’);
  • $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:

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');
}, 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.

  1. Nice!

    Comment by Davi | September 16, 2014

  2. 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

  3. $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