有许多的问题，这似乎是相当知名的，使用谷歌地图API来呈现一个jQuery UI选项卡内的地图时。 我见过这样的问题发布有关类似问题（ 这里和这里 ，例如），但有解决方案似乎只对地图API的V2工作。 我检查了其他参考文献都在这里 ，并在这里 ，有几乎一切沿着我可以通过谷歌搜索挖掘。
我一直在想东西的地图（ 使用API的V3）与喜忧参半一个jQuery标签。 我使用的一切的最新版本（目前为1.3.2的jQuery和jQuery UI 1.7.2，不知道电子地图）。
这是标记和Javascript：
<body>
<div id="dashtabs">
<span class="logout">
<a href="go away">Log out</a>
</span>
<!-- tabs -->
<ul class="dashtabNavigation">
<li><a href="#first_tab" >First</a></li>
<li><a href="#second_tab" >Second</a></li>
<li><a href="#map_tab" >Map</a></li>
</ul>
<!-- tab containers -->
<div id="first_tab">This is my first tab</div>
<div id="second_tab">This is my second tab</div>
<div id="map_tab">
<div id="map_canvas"></div>
</div>
</div>
</body>
和
$(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);
}
这里就是我发现确实/不工作（ 用于地图API V3）：
- 使用的jQuery UI的标签文档中描述的关闭左技术（并在回答我挂了两个问题）不会在所有的工作。 其实，最好的功能代码使用CSS
.ui-tabs .ui-tabs-hide { display: none; } .ui-tabs .ui-tabs-hide { display: none; }来代替。 - 只有这样，才能得到一个地图的标签显示在所有的设置的CSS宽度和高度
#map_canvas是绝对值。 更改宽度和高度auto或100%会导致地图不显示在所有，即使它已经被成功地呈现（使用绝对宽度和高度）。 - 我找不到它记录外的地图API的任何地方，但
map.checkResize()将不再工作。 相反，你必须通过调用消防resize事件google.maps.event.trigger(map, 'resize') - 如果地图不绑定到一个函数中初始化
tabsshow事件，地图本身是正确的渲染，但该控件不-大多数只是普通的缺失。
所以，这里是我的问题：
- 没有任何人有经验，完成同样的壮举？ 如果是这样，你是怎么想出什么就实际工作中，由于记录的招数没有为Google地图API v3的工作吗？
- 怎么样使用Ajax按加载标签内容jQuery UI的文档 ？ 我还没有机会与它玩，但我的猜测是，这将打破地图甚至更多。 什么是得到它的工作的机会（或者是不值得尝试）？
- 如何使地图填补了尽可能大的面积？ 我想它填补了标签和适应页面调整大小，多少，它的完成了在maps.google.com的方式。 但是，正如我所说，我似乎有只应用绝对宽度和高度CSS到地图DIV被卡住。
很抱歉，如果这是啰嗦，但是这可能是地图API V3 + jQuery的标签的唯一文件。 干杯!
Answer 1:
注意：这个答案收到一个无效的第三方编辑基本上取代了其内容，一些第三方的编辑不应该这样做。 然而，结果可能会比原来更有用，所以现在这两个版本如下：
被建议http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448作为V3的替代V2的checkResize（）。
表 - 坏谷歌，饼干后。
- 用户尤金纽什Fizdejko的完全重写表格2012：
对我来说，添加标记时，工作原理：
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!"
});
google.maps.event.addListener(map, "idle", function(){
marker.setMap(map);
});
Answer 2:
其实划伤我的回答以上。 jQueryUI的网站有答案，那就是：
为什么...
......我的滑块，谷歌地图，sIFR的等不得放置在一个隐藏的（无效）选项卡时工作？
需要用于其初始化一些维计算任何组件将不会在一个隐藏的标签工作，因为标签面板本身经由显示隐藏的：无，这样任何元素内将不会（在大多数浏览器0）报告其实际宽度和高度。
这里有一个简单的解决方法。 使用过左的技术来隐藏不活动的标签面板。 例如，在样式表替换为类选择“的.ui-标签的.ui-标签隐藏”与规则
.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}
谷歌地图还可以调整地图一旦选项卡显示如下：
$('#example').bind('tabsshow', function(event, ui) {
if (ui.panel.id == "map-tab") {
resizeMap();
}
});
resizeMap（）将在特定的地图上调用谷歌地图checkResize（）。
Answer 3:
只是重新定义隐藏标签的CSS类：
.ui-tabs .ui-tabs-hide {
position: absolute !important;
left: -10000px !important;
display:block !important;
}
Answer 4:
这是你可以为谷歌地图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
});
Answer 5:
我加载地图的标签已被证明之后。
这是哈克，但它为我工作。 简单地存储rel属性，像这样的I帧里面的地图iframe的网址：
<iframe width="490" height="300" rel="http://maps.google.com/maps?f=q&source=s..."></iframe>
本次活动将在iframe src属性设置为相对内的URL。
$("#tabs").tabs({
show:function(event, ui) {
var rel = $(ui.panel).find('iframe').attr('rel');
$(ui.panel).find('iframe').attr('src',rel);
}
});
Answer 6:
这不回答你所有的问题，但我已经得到了它的工作和所有其他的答案是缺少一两件事 - 当你重绘与“调整”事件的地图，你就失去了地图集中于这个地方。 所以，你还需要与setCenter再次更新地图的中心，如果你的地图上的位置居中。
此外，你不希望每个标签的变化触发时初始化地图，因为这是效率不高，可能会导致额外的解析。 首先，您需要保存您的中心位置，它可以是一个静态的纬度/长，或者地理编码，可能是这个样子：
var address = "21 Jump St, New York, NY";
var geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var center;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
center = results[0].geometry.location;
map.setCenter(center);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
然后
$("#tabs").tabs();
$('#tabs').bind('tabsshow', function(event, ui) {
if (ui.panel.id == "mapTab") {
google.maps.event.trigger(map, "resize");
map.setCenter(center); // Important to add this!
}
});
其中“mapTab”是你mapTab的ID，和“地图”是地图对象的变量名称。
Answer 7:
肯定的是初始化地图的代码被称为初始化您的选项卡中的段之前。
唯一的烦恼我所做的是，地图选项卡上的点击做出的浏览器跳转到集中在地图上，它爆发的那把jQuery的围绕主标签容器的默认边框。 我加了一回假的onclick调用地图选项卡的办理第一和一个简单的边框尺寸的标签：0上的主选项卡div来处理第二个。
所有这一切都为我工作。
祝好运！
Answer 8:
我已经通过各种论坛，寻找这个问题的答案......他们都表示使用
map.checkResize()
解决方案....似乎没有什么工作...然后我...当显示的标签，为什么不初始化选项卡我用这个
$("#servicesSlider ").tabs({
//event: 'mouseover'
fx: { height: 'toggle', opacity: 'toggle'},
show: function(event, ui) {
if (ui.panel.id == "service5") {
$(ui.panel).css("height","100%")
initialize()
}}
});
“服务5”是我的标签中保存我的谷歌地图V3的ID。
希望这对你的作品！
Answer 9:
嗨，该代码修正错误，但在IE无法正常工作。 寻寻觅觅之后，我发现，我们必须添加以下行和一切工作完美：
< !--[if IE]>
< style type="text/css">
.ui-tabs .ui-tabs-hide { position: relative; }
< /style>
< ![endif]-->
Answer 10:
我有这个问题太，我是通过加载AJAX的地图。
这似乎与百分比的问题是有没有任何一组尺寸（含装载的标记之一）的面板做。
使用下面的代码时创建的标签对我帮助很大：
$("#mainTabs").tabs({'show': function(event, ui){
$(ui.panel).attr('style', 'width:100%;height:100%;');
return true;
}});
Answer 11:
您可以拨打
map.fitBounds（边界）
会做刷新
Answer 12:
很讨厌的问题，但有一个有点hackaround它是可以解决的。 关键是要位置相对#tabs调整到每个选项卡中的outerheight当您选择一个新的。 以下是我做的：
$('#tabs').tabs({
selected:0,
'select': function(event, ui) {
//this is the href of the tab you're selecting
var currentTab = $(ui.tab).attr('href');
//this is the height of the related tab plus a figure on the end to account for padding...
var currentInner = $(currentTab + '.detail-tab').outerHeight() + 40;
//now just apply the height of the current tab you're selecting to the entire position:relative #tabs ID
$('#tabs').css('height', currentInner);
}
});
下面是我使用的CSS：
#tabs { position: relative; }
/*set the width here to whatever your column width is*/
.ui-tabs-panel{ position:absolute;top:0px; left:0; width:575px;}
.ui-tabs-panel.ui-tabs-hide { display:block !important; position:absolute; left:-99999em; top:-9999em}
Answer 13:
我得到这个容易被工作异步加载API ，然后简单地调用loadScript从<a>标签从绑到相应的标签onclick像这样的事件：
<li><a href="#tab3" onclick="loadScript();">Maps</a></li>
Answer 14:
我有同样的问题，并没有一个答案为我工作。 也许我不知道如何使用它们在我的代码，所以我增加了一个onclick事件的选项卡菜单初始化谷歌地图，它是工作。 我不知道这是否是一个很好的做法，但。
jQuery(document).ready(function($) {
$( '#tabs' ).tabs();
var href = $('#tabs').find('a[href="#tabs-4"]');
(href).on('click',function(){
initialize();
})});
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
}
<div id="tabs-4">
<div id="map" style="width:580px;height:380px;">
</div>
</div>
Answer 15:
对于地图API V3（EXP）和jQuery UI 1.10另一种解决方案：
var pano = new google.maps.StreetViewPanorama(...);
$('#tabs').tabs({
'activate': function(event, ui) {
if (ui.newPanel[0].id == "maps-tabs-id") {
pano.setVisible(true);
}
}
});
Answer 16:
我做了基思说什么和它的作品对我来说，在我的情况我使用jQuery的航点为我的导航标签，以便更好地理解这里是我使用的代码：
在头
<head>
<!-- Google Maps -->
<script>
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' + '&signed_in=true&callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
在我的标签：
<li><a href="#MyMap" onclick="loadScript();">My Map</a></li>
然后在DIV
<div id="map_canvas"></div>
希望这可以帮助别人，感谢所有！
Answer 17:
我正面临着同样的问题Semantic UI ，同时呼吁这个问题是固定init(); 当某个标签页加载，也可以将其绑定以及功能。
文章来源: Problems with Google Maps API v3 + jQuery UI Tabs
