How to refresh an angular ui-map (google-map)

Question

I'm hiding the map initially with an ng-hide. When the ng-hide-expression evaluates to true, the map is not shown correctly. It is only partially shown and behaviour is also strange on dragging. When I remove the ng-show attribute the map is shown correctly.

HTML:

<div ng-controller="MapCtrl">
   <button ng-click="showMap()">Show map</button>
   <div ng-show="showMapVar">
      <div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
       ui-event="{}">
      </div>
      <div id="map_canvas" ui-map="myMap" style="height:200px;width:300px" 
       ui-event="{}" ui-options="mapOptions">
      </div>
   </div>
</div>

Javascript:

angular.module('doc.ui-map', ['ui.map'])
        .controller('MapCtrl', ['$scope', function ($scope) {

$scope.myMarkers = [];

$scope.mapOptions = {
        center: new google.maps.LatLng(35.784, -78.670),
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
}
$scope.showMap = function(){
        $scope.showMapVar = true;
}

}]) ;

I haven't used `ui-map` myself, but I suspect that the problem is with the `width`/`height` of the element being incorrectly calculated when the map is shown. Try using `ng-if` (on Angular 1.2) or `ng-switch` (on older versions) to completely remove and recreate the DOM and see if it solves the problem. — musically_ut, Nov 29 '13 at 08:51
It looks like that the answer solved the problem. Please mark it as accepted to make it clearer to other users. :) — musically_ut, Jun 08 '14 at 07:12

score 11 · Answer 1 · answered Dec 02 '13 at 09:34

11

Using ng-show merely sets the display property to none when the object is not supposed to be visible. This is messing with the height/width calculations.

On the other hand, ng-if (Angular 1.2) removes and re-creates the DOM, forcing a recomputation of the height/width. That should fix the problem.

answered Dec 02 '13 at 09:34

musically_ut

34,028
8
94
106

I found that I could use something like `$timeout().then(function(){$scope.control.refresh();})` inside `showMap()`, but the markers would not redraw. `ng-if` solves both problems – michael Feb 24 '16 at 10:28

score 2 · Answer 2 · answered Nov 10 '14 at 15:06

I have my google map in a hidden tab,this solution worked for me, assuming you have your map initialized and referenced with $scope.map :

<div id="googleMap" style="height:600px;" ng-show="resizeMap()"></div>

in your controller :

$scope.resizeMap = function(){
        google.maps.event.trigger($scope.map, 'resize');
        $scope.map.setCenter(0);
}

score 1 · Answer 3 · edited May 23 '17 at 12:08

https://github.com/allenhwkim/angularjs-google-maps/issues/15 says

This happens because the map is initialized in hidden status. so the map has the size of its minimum width and height although the container is bigger

http://plnkr.co/edit/zLl2pJEnLzcq1rm07hLq?p=preview

As you see on the plunkr, when the map is initialized on visible DOM, it has the proper size. That's the difference.

If you want to hide the map at the initial status, I would recommend to redraw the map after it's shown. This may help, How do I force redraw with Google Maps API v3.0?

That solved it for me

How to refresh an angular ui-map (google-map)

3 Answers3