javascript - jquery タブ プラグイン内で Google マップが正しくレンダリングされない

Question

不動産業者のウェブサイトの更新に取り組んでおり、オブジェクト ページに Google マップを追加したいと考えています。マップは、タブ付きのコンテナー内に表示されます。タブには、小さな jQuery プラグインである IDTabs を使用しています。

マップはレンダリングされますが、マップ自体の配置がずれているようです。UI は全幅をレンダリングしますが、マップ自体はそうではありません。マップを移動しても、コンテナーの幅を超えて移動することはありません。ウィンドウのサイズが変更されると、再初期化され、地図が Maps UI コンテナの全幅をカバーします。

ここで確認できます: http://symvo.li/harbourtown/rental.php?id=1 (地図をクリック)

コード：

var map;
function initialize() {
    geocoder = new google.maps.Geocoder();

                    var mapOptions = {
                        zoom: 8,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

                    geocoder.geocode( { 'address': 'Kaya Sa 1, Bonaire'}, function(results, status) {
                        if(status == google.maps.GeocoderStatus.OK) {
                            map.setCenter(results[0].geometry.location);
                            var marker = new google.maps.Marker({
                              map: map,
                              position: results[0].geometry.location
                            });
                        }
                    });

                }
                google.maps.event.addDomListener(window, 'load', initialize);

マップが正しく表示されるようにするにはどうすればよいですか?