谷歌地图嵌入动态驱动器选项卡（不是 jquery-ui 选项卡）

Question

在花一整天的时间阅读这个常见问题后，当主页在页面加载时无法正确显示地图时，人们会遇到与动态标签相关的谷歌地图嵌入程序。地图未居中。有没有人对如何解决这个问题有任何建议，我非常愿意尝试任何事情。

我目前正在使用Dynamic Content 标签。我想知道有没有办法在我的情况下解决这个问题。

只是网站上的一个例子。

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Contacts</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>


<div id="country1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div> 
<div id="country2" class="tabcontent">
Tab content 1 here<br />Google Maps<br />
</div> 

谷歌地图嵌入

<iframe width="400" height="425" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?ie=UTF8&q=Ace+Liquors&fb=1&gl=us&hq=ace+liquor+glendale&cid=17378010379165161653&t=m&ll=34.162084,-118.301747&spn=0.007546,0.008562&z=16&iwloc=A&output=embed"></iframe>

联系人标签的个人代码如下：

<li>
<a id="contact" rel="hours" href="#">
<span>Contact</span>
</li>

据我了解，我需要一段 jquery 代码，以便在单击联系人时加载地图。任何人有任何建议强制地图仅在此事件发生时加载？

Answer 1

对我来说，您似乎正试图依靠
标签进行布局？也许使用 CSS 设置 iframe 的样式会有所帮助。通常，我将类似 iFrame 的内容放在第二个 div 中（通常带有包装器类），然后定位包装器。

我会建议这样的事情：

<div id="country2" class="tabcontent">
<p>Tab content 1 here</p>
<div class = "mapWrapper">
    <iframe width="400" height="425" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?ie=UTF8&q=Ace+Liquors&fb=1&gl=us&hq=ace+liquor+glendale&cid=17378010379165161653&t=m&ll=34.162084,-118.301747&spn=0.007546,0.008562&z=16&iwloc=A&output=embed"></iframe>
</div>
</div> 

然后在你的 CSS 中

.tabcontent
{
    width: 100%; /* This must be set to something, or you won't be able to have
                     the inner div centered correctly*/
}
.mapWrapper
{
    width:auto; margin: 0 auto;
}

Answer 2

您从 StackOverflow 提到的问题似乎不符合您的需求，因为使用了 Google 地图的 Javascript API。

我假设使用您的标签 Javascript 无法计算 iframe 的初始宽度和高度以使其居中。

我无法使用动态内容选项卡，因为锚选项卡链接在演示页面中不起作用。 我已经设法在带有纯 CSS 选项卡的 JsFiddle 中使用嵌入式 Google 地图 (http://jsfiddle.net/bKaxg/342/)

看一下提供的样式，我已经将 iframe 设置为块显示

.content iframe{
    margin:0 auto;
    display:block;
}

您还可以使用 Twitter Bootstrap 的标签 (http://jsfiddle.net/K9LpL/248/)

甚至是简单易用的自定义脚本方法 (http://jsfiddle.net/e3Lhc/29/)

编辑：我已经设法使用提供的脚本，使用我的 CSS 的第一行将您的地图居中 http://jsfiddle.net/DqZT8/3/