Why are not all Google Map Tiles rendered on the initial load of an AngularJS app?

Call this function in your map controller:

google.maps.event.trigger(map, 'resize');

That should do the trick.

I found this problem when trying to re-center the map after the view loaded. There would be a single tile in the top left corner.

I noticed that it was centering the map at the topleft of the div (0,0), and figured that it must be measuring the div before it was visible. This would mean the dimensions were 0px, 0px and so to center the map would mean placing a single tile at (0,0).

I tried the solution of triggering the resize event

google.maps.event.trigger(map, 'resize');

and that almost worked - it filled the div with tiles, but it was still centered at (0,0).

What worked was to wrap the re-center code in a $timeout(). This ensures that the div is fully loaded and correctly sized before the code runs. Now it works perfectly.

$timeout(function() {    // still need this.    google.maps.event.trigger(map, 'resize');       map.setCenter(53, -6);});

After a lot of trial and error, I found a workaround. By merely injecting the GoogleMap Service into the app run command, it successfully rendered the complete map. I ALSO had to make the default '/' route show the map page. Anything else I would do that involved trying to switch from a home (non-map) page to the map page would result in a partially rendered map. :(

Perhaps I or someone will suggest a more elegant solution. :)

  // Generated by CoffeeScript 1.6.1  (function() {    'use strict';    angular.module('of4App', []).config(function($routeProvider) {      return $routeProvider.when('/menu', {        templateUrl: 'views/menu.html',        controller: 'MainCtrl'      }).when('/list', {        templateUrl: 'views/list.html',        controller: 'MainCtrl'      }).when('/map', {        templateUrl: 'views/map.html',        controller: 'MapCtrl'      }).when('/about', {        templateUrl: 'views/main.html',        controller: 'MainCtrl'      }).otherwise({        redirectTo: '/map'      });    }).run(function($rootScope, $location, GoogleMap) {      var rootScope;      rootScope = $rootScope;      rootScope.navBarHeight = 40;      return rootScope.mapShown = function() {        var mapShown;        mapShown = $location.path().indexOf('/map') > -1;        return mapShown;      };    });  }).call(this);