javascript - Google マップが完全にレンダリングされない

Question

Googleマップを表示するためのタブがありますが、完全なマップが表示されていないため、グーグルで検索しましたが、まだ解決できません。jqueryタブにあるという事実と関係があると思います。これを修正するにはどうすればよいですか?

これは、周囲の div を含む html の外観です。

                <div id="details" class="det_tab1">
                            <ul class="head">
                                <li><a href="#" class="det_tab1">Property details</a></li>
                                <li><a href="#" class="det_tab2">Map view</a></li>
                                <li><a href="#" class="det_tab3">Street view</a></li>
                            </ul>
                            <div class="det_tab2">
                                <div id="map_canvas"></div>
                            </div>

そして、ここにjavascriptがあります

 <script type="text/javascript">
        function initialize() {
            var mapOptions = {
                center: new google.maps.LatLng(-34.397, 150.644),
                zoom:8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = document.getElementById("map_canvas");
            map = new google.maps.Map(map, mapOptions);
            var center = map.get_center();
            google.maps.event.trigger(map, 'resize');
            map.set_center(center);
        }
    </script>

そしてjquery;

 $('#details .head a').click(function () {
                if ($(this).attr('class') != $('#details').attr('class')) {
                    $('#details').attr('class', $(this).attr('class'));
                }
                return false;
            });