Google Maps API v3 + jQuery UI标签的问题

当使用Google Maps API在jQuery UI选项卡中呈现地图时,有许多问题似乎都是众所周知的.我已经看到关于类似问题发布的SO问题(例如这里和这里),但那里的解决方案似乎只适用于Maps API的v2.我检查过的其他参考文献在这里和这里,以及我可以通过谷歌搜索挖掘的几乎所有内容.

我一直在尝试将地图(使用API​​的v3)填充到具有混合结果的jQuery选项卡中.我正在使用最新版本的一切(目前jQuery 1.3.2,jQuery UI 1.7.2,不了解Maps).

这是标记和javascript:

    

        
            Log out
        
        
        

            
First
            
Second
            
Map
        

        
        
This is my first tab
        
This is my second tab
        

             

        
    

和

$(document).ready(function() {
    var map = null;
    $('#dashtabs').tabs();
    $('#dashtabs').bind('tabsshow', function(event, ui) {
        if (ui.panel.id == 'map_tab' && !map)
        {
            map = initializeMap();
            google.maps.event.trigger(map, 'resize');
        }
    });
});

function initializeMap() {
    // Just some canned map for now
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    return new google.maps.Map($('#map_canvas')[0], myOptions);
}

以下是我发现的功能/不起作用(对于Maps API v3):

使用jQuery UI Tabs文档中描述的左外技术(以及我链接的两个问题的答案)根本不起作用.事实上,功能最佳的代码使用CSS .ui-tabs .ui-tabs-hide { display: none; }代替.

获取地图以在标签中显示的唯一方法是将CSS宽度和高度设置#map_canvas为绝对值.将宽度和高度更改为auto或100%导致地图根本不显示,即使它已经成功渲染(使用绝对宽度和高度).

我无法在Maps API之外的任何地方找到它,但map.checkResize()不再适用.相反,您必须通过调用来触发resize事件google.maps.event.trigger(map, 'resize').

如果地图未在绑定到tabsshow事件的函数内初始化,则地图本身会正确呈现,但控件不会 - 大多数都只是缺失.

所以,这是我的问题:

有没有其他人有完成同样壮举的经验？如果是这样,你是如何找出实际工作的,因为文档化的技巧不适用于Maps API v3？

如何根据jQuery UI文档使用Ajax加载选项卡内容？我没有机会玩它,但我的猜测是它会打破地图甚至更多.让它工作的机会有多大(或者不值得尝试)？

如何使地图填充最大可能区域？我希望它能够填充标签并适应页面调整大小,这与在maps.google.com上完成的方式非常相似.但是,正如我所说,我似乎坚持只将绝对宽度和高度CSS应用于地图div.

很抱歉,如果这是冗长的,但这可能是Maps API v3 + jQuery选项卡的唯一文档.干杯!

注意:此答案收到了无效的第三方编辑,这实际上取代了其内容,这是第三方编辑不应该做的事情.但是,结果可能比原始结果更有用,因此现在给出两个版本:

原作者Anon的版本来自2010年,经过Anon的一次编辑

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

http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448建议 将v3替换为v2的checkResize().

Blech - 糟糕的谷歌,没有cookie.

用户Eugeniusz Fizdejko完整的重写形式2012:

对我来说,在添加标记时起作用:

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});

google.maps.event.addListener(map, "idle", function(){
    marker.setMap(map);
});

实际上抓住我上面的答案.jQueryUI网站有答案,这里是:

为什么...

...我的滑块,谷歌地图,sIFR等在放入隐藏(非活动)标签时不起作用？

任何需要进行初始化计算以进行初始化的组件都不能在隐藏选项卡中工作,因为选项卡面板本身是通过display:none隐藏的,因此内部的任何元素都不会报告它们的实际宽度和高度(大多数浏览器中为0) .

有一个简单的解决方法.使用左侧技术隐藏非活动选项卡面板.例如,在样式表中替换类选择器".ui-tabs .ui-tabs-hide"的规则

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}

对于Google地图,您还可以在选项卡显示后调整地图大小,如下所示:

$('#example').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == "map-tab") {
        resizeMap();
    }
});

resizeMap()将在特定地图上调用Google Maps的checkResize().

只需重新定义隐藏选项卡的css类:

.ui-tabs .ui-tabs-hide {
    position: absolute !important;
    left: -10000px !important;
    display:block !important;
}

这是您可以为Google Maps v3做的事情:

google.maps.event.addListenerOnce(map, 'idle', function() {
    google.maps.event.trigger(map, 'resize');
    map.setCenter(point); // be sure to reset the map center as well
});