Google Maps for AngularJS does not work with any Angular directives related to “HIDE” and “SHOW”

Question

The AngularJS Google maps library does not work once ng-hide or ng-show is used, once one of the two display functions is called, this is what happens to the map:

This can be fixed only when you slightly resize your browser window, is there a hack that'll do something similar to window resizing to fix this graphical issue with javascript?

Without the hack this AngularJS google maps library completely defeats the purpose of single page applications.

In another stackoverflow issue just like this, the solution was to add ng-cloak directive to this map tag:

<map ng-cloak zoom="10" style="visibility:hidden; z-index:1000; width:900px; height:300px; display:inline-block;" width="1600" height="1600"/>

But I've tried that and it does absolutely nothing. Maybe I could do something like $rootScope.map.width = z; ???

How could you replicate the window resizing fix instantly using JavaScript? Or I guess a better question is how can you get this library to work despite the fact that it's broken.

This Angular library will not work unless this issue is patched and a temporary hack is used in place to counter the graphical bug.

Answer 1

尝试使用data-ng-if代替ng-hide或ng-show。

Answer 2

1. Use ng-if instead of ng-show. ng-if will render the html but ng-show just hide the tags.

2. Use uiGampIsReady force the map resize:

   uiGmapIsReady.promise().then(function () { var map = $scope.map.control.getGMap(); google.maps.event.trigger(map, 'resize'); });