Google Maps API v3和jQuery-UI标签
问题描述:
我正在使用Google Maps API的新版本v3。基本上我遇到的问题是我在jQuery UI选项卡中有一个Google Map。地图不在第一个选项卡中,因此您必须单击选项卡才能查看地图,但它并不总是正确显示。即有时地图图像放置不正确。Google Maps API v3和jQuery-UI标签
我有这个问题时,我用的是API第2,但我设法通过初始化我的地图这样来解决问题:
map = new GMap2(document.getElementById("map"),{size:new GSize(500,340)});
不幸的是,它不是在V3工作。我看了一眼在这个线程的建议:Problems with Google Maps API v3 + jQuery UI Tabs
真的没什么工作对我来说,但我用我初始化选项卡上的加载地图功能的解决方法之一:
$(function()
{
$("#tabs-container").tabs({show: function(event, ui)
{
if(ui.panel.id == "viewmap")
{
mapiInitialize();
}
}});
});
这是所有不错,但我更喜欢地图在用户点击标签时显示“有”。有时地图加载需要花几秒钟,所有用户在这段时间看到的都是纯灰色的背景 - 某种加载指示器可能会有所帮助。
那么有没有人有任何建议?我的标记和CSS如下:
<div id="tabs-container">
<ul>
<li><a href="#details"><span>Details</span></a></li>
<li><a href="#viewmap"><span>Location Map</span></a></li>
<li><a href="#reviews"><span>Reviews (<?php echo $numrows; ?>)</span></a></li>
</ul>
<div id="details"><?php echo $details; ?></div>
<div id="viewmap" style="padding: 10px; border: 1px solid #A9A9A9;">
<div id="map" style="height: 340px;"></div>
</div>
<div id="reviews"><?php echo $reviews; ?></div>
</div><!-- end tab-container -->
答
一旦你切换到具有地图调用google.maps.events.trigger(map, 'resize');
那么就应该让它正确显示的选项卡。
答
试试这个,当你初始化你的jQuery UI选项卡:
$("#tabs-container").tabs({
show: function(event, ui) {
google.maps.event.trigger(map, 'resize');
}
});
注意:您必须初始化地图你初始化标签之前。
答
只使用
map.setZoom(map.getZoom());
凡应的代码去?在我的jQuery UI标签功能或谷歌地图JS文件?我试着放入jQuery UI Tabs函数,但它告诉我google.maps.events为null。我在jQuery UI Tabs功能之前包含了Google Maps JS文件。 – GSTAR 2010-10-12 10:05:34
当选项卡显示并且地图现在可见时,它应该放在选项卡代码中的某处。 – skarE 2010-10-12 22:27:49
这仍然不起作用。任何人都可以提供建议? – GSTAR 2010-10-25 14:27:05