为什么我的地图不在jQuery选项卡中呈现？

Question

如果我在默认隐藏的选项卡中渲染地图,然后导航到该选项卡(使其可见),则地图无法正确渲染.但是当我刷新页面时,地图会正确呈现.

问题

Google地图的Javascript

var map;
function initialize() {
    var latlng = new google.maps.LatLng(serLat, serLang); // - 34.397, 150.644);
    var myOptions = {
        zoom: 10,

        width: 1270,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    var marker = new google.maps.Marker
    (
        {
            position: new google.maps.LatLng(serLat, serLang),
            map: map,
            width: 1270,
            title: 'Click'
        }
    );
    //        var infowindow = new google.maps.InfoWindow({
    //            content: cntnt
    //        });
    //        google.maps.event.addListener(marker, 'click', function() {
    //            // Calling the open method of the infoWindow 
    //            infowindow.open(map, marker);
    //        });
}
window.onload = initialize;

Jquery选项卡的URL http://quickerbook.imobisoft.eu/App_Themes/js/jquery.tabify.js

标签的HTML

<ul id="tabs-hd">
    <li class="active"><a href="#tab1">Tab One</a></li>
    <li><a href="#tab2">Tab Two</a></li>
    <li><a href="#tab3">Tab for Google Map</a></li>
</ul>

<div id="tab1">Content for tab one...</div>
<div id="tab2">Content for tab two...</div>
<div id="tab3"><div id="map"></div></div>

Answer 1

您需要做两件事:

1. 当您显示隐藏的选项卡时,请确保正确调整地图所在的容器DIV的大小.

2. 要么在创建地图之前等待DIV可见并调整大小,要么在DIV可见并调整大小之后,向地图发送调整大小消息:

google.maps.event.trigger( map, 'resize' );