angular-google-map in hidden div

Question

Первоначально угловая карта google определена в скрытом div.Когда я нажимаю кнопку, карты показывают только верхнюю левую сторону (1/4-й карты) в div. Я использую этот код-

<div id="angular-google-map-container" class="col-sm-12 view-padding"> 
    <ui-gmap-google-map center="mapView.center" zoom="mapView.zoom" draggable="true" dragging="mapView.dragging"> 
     <ui-gmap-markers models="places | studiofilter : multipleDemo.activity : multipleDemo.location : multipleDemo.studio" coords="'coords'" events="cityMarkerEvents"> 
      <ui-gmap-windows show="'places.show'" > 
        <div > Map</div>     
      </ui-gmap-windows> 
     </ui-gmap-markers> 

Этот вопрос уже задавали в StackOverflow, но все они связаны с Google Map api.How я могу решить эту проблему

Answer 1

app.controller('gMapCtrl', ['$scope','uiGmapIsReady', function($scope, IsReady){ 
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 }; 
$scope.displayed = false; 
$scope.showMap = function(){ 
    $scope.displayed = true; 
    IsReady.promise().then(function (maps) { 
     google.maps.event.trigger(maps[0].map, 'resize'); 
    }); 
} 
}]);