jQuery UI + Gmaps =问题(至少对我来说)帮助!

我一发现就开始使用jQuery,它非常强大,但当我尝试将Gmaps api加载到jQuery UI带来的选项卡时,我开始苦苦挣扎.在IE 6,7,8中,它运行得很好,但是在Firefox中,Safari(我使用的是Mac但在Windows中测试它们并且它们都提供相同的问题)地图不会完全加载.当我单击加载地图的选项卡时,只有部分地图完全可操作,其余部分为灰色且无法点击.请查看下面的链接,然后单击firefox/safari和IE中的第三个选项卡,您将看到问题所在.

http://movewithusoverseas.com/index-new.php?z=product-info.html&pid=1

我不知道它是jQuery UI代码中的错误还是我做错了什么.如果我从选项卡中加载地图,则会显示地图.

我正在与这个问题作斗争一个半星期......任何帮助将不胜感激.

提前致谢.路易斯

当用户打开第三个选项卡时,您需要调用map.checkResize().

问题是:初始化地图时,第三个选项卡不可见,并且地图的大小不正确.尝试调整浏览器窗口的大小(这会调用checkResize),您会注意到地图会自行更正.

在jQuery UI的文档说明如何事件绑定到标签的开幕式.这适用于您的页面:

$('#tabs').bind('tabsshow', function(event, ui) {
    if (ui.panel.id == "tabs-3") {
        map.checkResize();
    }
});

更新: Luis指出您也可以使用左侧技术解决此问题:

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