google-maps - angularjsで作成されたタブのGoogleマップが中央に配置されていません

Question

次の問題があります。

概要ページにタブ (「ホテルの詳細」、「地図」、「レビュー」) があるホテルを予約するアプリケーションで作業しています。タブは angularjs で作成されます。また、ページには、「地図」タブへのリンクであるホテルの住所があります。[マップ] タブをクリックすると、Google マップが正常に表示されます。しかし、ホテルの住所をクリックすると、[地図] タブが開きますが、地図が中央に表示されません。ページを更新すると、中央に表示されます。

これはマップを処理するコードです:

$scope.loadMap = function (targetID){
            var latitude = $scope.latitude;     
            var longitude = $scope.longitude;
            if(latitude && longitude && document.getElementById(targetID) != null ){
                var center = new google.maps.LatLng(latitude, longitude);
                var map_options = {
                    zoom: 13,
                    center: center,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                // create map
                var map = new google.maps.Map(document.getElementById(targetID), map_options);

                // configure marker
                var marker_options = {
                    map: map,
                    position: center,
                    title: $scope.hotelName
                };

                // create marker
                var marker = new google.maps.Marker(marker_options);

                var infoWindow = new google.maps.InfoWindow();

                window.setTimeout(function(){
                    google.maps.event.trigger(map, 'resize');
                },2000);
            }
        }

助けてくれませんか？