Why is my Google Map in a jQuery UI tab only displaying one tile at the top left corner of the screen?
===

I have two Google Map API v3 Maps in jQuery tabs. They both display the first time they appear in their tabs, but the initially deselected tab only displays a tile or so at the top left-hand corner.

Calling google.maps.event.trigger(all_map, 'resize') periodically does not change this.

In my code I have:

                <div id='all_map_canvas'>
                </div>
                <script>
                    function show_all_map()
                        {
                        var center = new google.maps.                           LatLng(%(center_latitude)s - .15, %(center_longitude)s + .2);
                        var myoptions = {
                            zoom: %(zoom)s,
                            center: center,
                            mapTypeId: google.maps.MapTypeId.TERRAIN
                            };
                        all_map = new google.maps.Map(document.                 getElementById('all_map_canvas'), myoptions);
                        all_map.setZoom(%(zoom)s);
                        jQuery('#all_map_canvas').show();
                        google.maps.event.trigger(all_map, 'resize');
                        }
                    function show_all_map_markers()
                        {
                        %(all_map_markers)s
                        }
                    var markers = [];
                    jQuery('#all_map_canvas').width(jQuery(window).width() -    300);
                    jQuery('#all_map_canvas').height(jQuery(window).height() -  125);



How can I make both maps display in full after tab swaps?