How to trigger a map resize event after displaying the angular.js ui-map directive?

Question

The ui-map example works fine when used on a simple angular.js page. Now I am using ui-router and trying to display the map inside the view. It happens that fragments of the map are displayed only on half the map. If I resize the window, the map will display correctly.

I think I need to trigger the Google Maps resize event after the view is displayed, but how?

google.maps.event.trigger(<myMapObject>, 'resize'); 

Answer 1

Wait a while before calling the trigger, I had the same problem and was found here:

AngularJS: map through the Google Maps API v3 tab

 window.setTimeout(function(){ google.maps.event.trigger(map, 'resize'); },100); 

Answer 2

who work with angular 1.3.15

 $timeout(function(){ angular.forEach($scope.maps, function(index) { google.maps.event.trigger(index, 'resize'); }); }, 100); } $scope.maps = []; $scope.$on('mapInitialized', function(evt, evtMap) { $scope.maps.push(evtMap); }); 

http://plnkr.co/edit/3P4iLTrog1ismFDUQNQe?p=preview

---

other solutions

---

without adding $ timeout you can also use $ scope. $ applyAsync (), which runs code in the same digest loop