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

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

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

这只是网站上的一个例子

<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> 

此处选项卡内容1
此处选项卡内容1

这里的选项卡内容1
谷歌地图

谷歌地图embd

<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代码，在单击联系人时加载地图。有人建议仅在发生此事件时才强制加载地图吗？

对我来说，似乎您正试图依靠
标记进行布局？也许使用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> 

---

您在StackOverflow中提到的问题似乎不适合您的需要，因为Google maps使用了Javascript API

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

我无法使用动态内容选项卡，因为锚定选项卡链接在演示页面中不起作用。 不过，我还是设法在JSFIDLE中使用带有纯CSS选项卡的嵌入式Google地图（）

看看提供的样式，我已经将iframe设置为block

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

您还可以使用Twitter引导的选项卡（）

甚至是一种简单易用的自定义脚本方法（）

---

编辑：我已经使用了提供的脚本，使用CSS的第一行将地图居中

有什么问题？是地图没有在正确的位置居中，还是iframe没有正确居中？与此类似：但我没有使用jquery ui选项卡。我觉得这不相关。这个问题是使用GoogleMapsAPI直接在页面中生成地图。您使用的是iframe，这是一种非常不同的方法。不完全是这样，因为当它们解决问题时，当javascript检测到/index.php时会触发一个事件，请执行此操作。我的脚本不是这样工作的，它不会像jQueryUI选项卡那样触发页面上的#扩展。到目前为止，我已经连续搜索了一个星期没有任何成功。我找到的大多数答案都是使用jQueryUI选项卡作为解决问题的方法，这可能是因为我对javascript了解不够，无法使用他们的方法来解决问题。这就是我为什么要悬赏的原因。我更喜欢100%宽度的标签中的地图。例如，你的最后一个例子是我的脚本，如果你注意到你的标签必须纠正中间的PIN，并且标签的其余部分是不正确的。这是当前的问题，css的第一行并不能解决这个问题，当一个人进入网站时，他们不在“联系人”选项卡上，当他们获得“联系人”选项卡时，地图偏离中心，因此你的选项卡2、3、4。另外：除了第一个->bKaxg/342之外，你的示例实际上都不起作用，但我现在不愿意更改我的选项卡结构。哦，我明白了，请阅读嵌入谷歌地图的文档。我已经对地图的宽度和高度进行了调整，以便提供一个将实际地图居中的通用解决方案。如果要将标记放置在中间，则必须使用JavaScript API或尝试创建一个新的嵌入地图。这与标记无关，而是与地图位于实际位置的中心有关，它位于一边。在iframe上添加提供的高度和宽度，地图将居中。您提供的iframe在选项卡内外呈现相同的内容。查看我使用的4更新版，将地图放在当前选项卡的中间。这并没有解决我的问题，请参考是什么脚本工作了。我看不出
与我的脚本有什么关系。

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