title: How to refresh an angular ui-map (google-map)
body: <p>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.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-controller="MapCtrl"&gt;
     &lt;button ng-click="showMap()"&gt;Show map&lt;/button&gt;
     &lt;div ng-show="showMapVar"&gt;
        &lt;div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
         ui-event="{}"&gt;
        &lt;/div&gt;
        &lt;div id="map_canvas" ui-map="myMap" style="height:200px;width:300px" 
         ui-event="{}" ui-options="mapOptions"&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>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;
  }
  
  }]) ;
  </code></pre>