google-maps - ページの読み込み後に MapBox マップを初期化する

Question

MapBox JavaScript APIを使用して、タブ ウィジェットにいくつかのマップを表示しようとしています。ページが最初にロードされるときにマップがロードされないという事実を除いて、すべてが正常に機能しています。ズームイン/ズームアウトやドラッグなどの方法でマップを操作するとすぐに、すべてのマップ タイルが読み込まれます。

<div class="g12" id="mapbox" style="display:none">
<div class="widget" id="widget_tabs" style="min-height:400px;">
    <h3 class="handle">http://www.mapbox.com/mapbox.js/example/v1.0.0/</h3>
    <div class="tab">
        <ul>
            <li><a href="#map-1">MapBox 1</a></li>
            <li><a href="#map-2">MapBox 2</a></li>
            <li><a href="#map-3">MapBox 3</a></li>
        </ul>            
        <script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
        <link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />

        <style>
            #map1 #map2 #map3 { position:absolute; }        
            #content {position: relative;}
        </style> 

        <script>
        $(document).ready(function() {
            mapbox.auto('map1', 'examples.map-zr0njcqy');
            mapbox.auto('map2', 'examples.map-zr0njcqy');
            mapbox.auto('map3', 'examples.map-zr0njcqy');

            $('#content').css({ height: 700});
            var x = $('#mapbox'); /* cache the selector */
            $('#map1,#map2,#map3').css({ width:  x.width() * .98 });
            $('#map1,#map2,#map3').css({ height: x.height() * .75});
        });             
        </script>

        <div id="map-1">                   
            <div id='map1'></div>  
        </div>    

        <div id="map-2">
            <div id='map2'></div>  
        </div>

        <div id="map-3">
            <div id='map3'></div>  
        </div>    

    </div> <!--end of class=tab-->
</div> <!--end of widget_tabs-->    

このコードを変更して、ページの読み込み後にマップが正しく読み込まれるようにするにはどうすればよいですか? ありがとう。