Why aren't all Google Map Tiles images displayed when the AngularJS application boots up?

Question

Work with the Google Map application created using AngularJS.

Currently deployed sandbox: http://of.xchg.com/

Click on the "Map" link and you will notice that there is only ONE tile, if ANYTHING is visualized.

If you then PICTURE a browser window, THEN the rest of the map fragments will be fully displayed.

Here is the git project: https://github.com/LarryEitel/of4

Why aren't all Google Map tiles displayed?

Is there a way to check the full rendering of fragments?

Is there a way to force re-rendering of all map fragments?

Answer 1

After many trial and error, I found a workaround. By simply entering the GoogleMap service into the application launch command, it successfully displayed the full map. I also had to make the default route '/' show the map page. All that I would like to do, related to an attempt to go from the home page (not the map) to the map page, will lead to a partially displayed map .: (

Maybe 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); 

Answer 2

Call this function in the card controller:

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

That should do the trick.

Answer 3

I found this problem when trying to redirect the map after loading the view. In the upper left corner there will be one tile.

I noticed that he centered the map on top of the div (0,0), and realized that he had to measure the div before it was visible. This would mean that the dimensions were 0px, 0px , and therefore centering the map would mean placing one tile at (0,0).

I tried the solution to trigger the resize event

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

and it almost worked - it filled the div with tiles, but it was still focused on (0,0).

What was done to wrap the center code in $timeout() . This ensures that the div is fully loaded and properly installed before the code runs. Now it works fine.

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