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>

google maps 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代码片段，在点击Contacts时会加载地图。任何人都有任何建议强制地图仅在此事件发生时加载？

Answer 1

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

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

我无法使用动态内容标签，因为主要标签链接无法在演示页面中使用。我已经设法在JsFiddle中使用嵌入式Google地图和纯CSS标签（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/

Answer 2

对我而言，您似乎正在努力依赖＆lt; BR＆GT;布局的标签？也许使用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;
}

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

2 个答案: