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

Question

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?

Answer 1

Call this function in your map controller:

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

That should do the trick.

Answer 2

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