Question

一旦我发现它就开始使用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代码中的错误或者我做错了什么。如果我从选项卡中加载地图，则地图显示为OK。

我正在与这个问题作斗争一个半星期......任何帮助都会非常感激。

提前致谢。路易斯

Answer 1

当用户打开第三个标签页时，您需要拨打map.checkResize()。

问题在于：初始化地图时，第三个选项卡不可见，并且地图的大小不正确。尝试调整浏览器窗口的大小（这会调用checkResize），您会注意到地图会自行更正。

jQuery UI documentation显示了如何将事件绑定到选项卡的开头。这适用于您的页面：

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

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

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

Answer 2

我遇到了与jquery标签相同的问题。但我决定不使用css修复，因为它通过将所有选项卡移动到屏幕之外来替换所有选项卡的原始隐藏显示属性。我相信这可以被谷歌或其他搜索引擎视为作弊。

无论如何，我创建了与Chris B上面提交的代码非常相似的代码，添加了一个，即map.setCenter（）。因为我的地图在checkResize（）方法之后没有正确居中。

$('#tabs').bind('tabsshow', function(event, ui) {
    if( $('#map').is(':visible') ) {
        map.checkResize();
        map.setCenter(centerPoint, 14);
    }
});

Answer 3

请注意，API v3中不再存在checkResize()函数。等效于：

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

Answer 4

我之前遇到过这种情况。我还没有完成你的代码，所以我无法诊断你的问题，但对我来说问题是map_canvas div的HTML / CSS（一个谷歌地图用来渲染地图）的大小错误。大多数人都喜欢div中的div，你需要将内部div设置为width = 100％和height = 100％。

Answer 5

这里提供的解决方案都不适用于gmap js。我发现这个人做了：

jQuery('a[href="#tabID"]').on('shown.bs.tab', function(e)
{
    var map = new GMaps({
        div: '#gmap-marker',
        lat: -12.043333,
        lng: -77.028333
    });
});

jQuery UI + Gmaps =问题（至少对我来说）帮助！

5 个答案: