javascript - 谷歌地图未完全呈现

Question

我有一个用于显示谷歌地图的标签，但是它没有显示完整的地图，我已经做了一些谷歌搜索，但仍然无法解决它。我相信它与它位于 jquery 选项卡中的事实有关。我该如何解决？

这就是 html 的样子，包括周围的 div；

                <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;
            });

Answer 1

对于那些仍在尝试解决此问题的人，触发调整大小立即不起作用，您应该稍微延迟一下。

var millisecondsToWait = 200;
setTimeout(function () {
    google.maps.event.trigger(map, 'resize');
    google.maps.event.trigger($('#map'), 'resize');
}, millisecondsToWait);