How to refresh an angular ui-map (google-map)
angular-ui, angularjs
Solution
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.
Problem
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; } }]) ; ```