隱藏div中的angular-google-map

Question

最初，角形Google地圖是在隱藏的div中定義的。當我點擊按鈕時，地圖僅在div中顯示左上角（地圖的1/4）。我正在使用此代碼-

<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有關。如何解決此問題

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');
    });
}
}]);