Why are not all Google Map Tiles rendered on the initial load of an AngularJS app?
angularjs, google-maps-api-3
Solution
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);
Problem
Working on a Google Map app built with AngularJS. Currently deployed sandbox: http://of.xchg.com/ Click Map link and you will notice only ONE tile IF ANY are rendered. If you then RESIZE the browser window, THEN the rest of the map tiles will render completely. Here is the git project: https://github.com/LarryEitel/of4 Why are not all Google Map Tiles rendered? Is there a way to test for complete rendering of tiles? Is there a way to force re-rendering of all map tiles?