The ui-map example works perfectly when using on a simple angular.js page. Now I'm using the ui-router and trying to display the map inside a view. What happens is that the map tiles are only displayed on half of the map. If I resize the window, the map is displayed correctly.

I think I have to trigger the Google Maps resize event once the view is rendered, but how?

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

The ui-map example works perfectly when using on a simple angular.js page. Now I'm using the ui-router and trying to display the map inside a view. What happens is that the map tiles are only displayed on half of the map. If I resize the window, the map is displayed correctly.

I think I have to trigger the Google Maps resize event once the view is rendered, but how?

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

• javascript
• google-maps
• angularjs
• google-maps-api-3

2 Answers 2

Wait for a while before calling trigger, I had this same issue and found resolved here:

AngularJS: map via Google Maps API v3 in a tab

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

that 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 could also use $scope.$applyAsync() that runs code within the same digest cycle