Google Maps API v3 + jQuery UI选项卡存在问题
使用Google Maps API在jQuery UI选项卡中呈现地图时，存在许多似乎是众所周知的问题。我已经看到有关类似问题的SO问题（例如，这里和这里），但那里的解决方案似乎仅适用于Maps API的v2。我检查过的其他参考资料在这里和这里，以及我可以通过Googling挖掘的几乎所有内容。
我一直在尝试将地图（使用API的v3）填充到具有混合结果的jQuery标签中。我正在使用所有内容的最新版本（当前为jQuery 1.3.2，jQuery UI 1.7.2，不了解Maps）。
这是标记和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');
}
});
});
这是我发现的/不起作用的内容（对于Maps API v3）：
使用jQuery UI Tabs文档（以及我链接的两个问题的答案）中所述的左偏技术根本不起作用。实际上，功能最佳的代码.ui-tabs .ui-tabs-hide { display: none; }改为使用CSS 。
使地图完全显示在选项卡中的唯一方法是将CSS的width和height设置#map_canvas为绝对值。将宽度和高度更改为auto或100%导致地图根本不显示，即使已经成功渲染（使用绝对宽度和高度）也是如此。
我找不到它在Maps API之外的任何地方记录，但map.checkResize()将无法再使用。相反，您必须通过调用触发一个调整大小事件google.maps.event.trigger(map, 'resize')。
如果未在绑定到tabsshow事件的函数内部初始化地图，则地图本身会正确呈现，但控件不会正确显示-大多数只是明显丢失。
所以，这是我的问题：
还有其他人有完成相同壮举的经验吗？如果是这样，由于记录的技巧对Maps API v3不起作用，您如何找出实际可行的方法？
如何根据jQuery UI文档使用Ajax加载选项卡内容？我还没有机会尝试使用它，但是我猜想它将进一步打破Maps。使它正常工作的机会是什么（或者不值得尝试）？
如何使地图填充尽可能大的区域？我希望它能填充选项卡并适应页面大小调整，这与在maps.google.com上所做的方式大同小异。但是，就像我说的那样，我似乎只限于将绝对宽度和高度CSS应用于地图div。
抱歉，如果您花了很长时间，但这可能是Maps API v3 + jQuery标签的唯一文档。干杯!
桃花长相依3回答
随时随地看视频慕课网APP
JQuery
前端工具