4

メインページがページの読み込み時にマップを正しく表示しない場合、動的タブに関連するGoogleマップの埋め込みプログラムで人々が抱えるこの一般的な問題を一日中読んだ後. マップが中央に配置されていません。この問題を解決する方法について誰か提案がありますか?私は何でも試してみたいと思っています.

現在、動的コンテンツタブを使用しています。私の状況でこの問題を解決する方法があるのだろうかと思っています。

サイトからの単なる例。

<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 マップの埋め込み

<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コードが必要です。このイベントが発生したときにのみマップを強制的にロードするための提案はありますか?

4

2 に答える 2

0

私には、レイアウトのために < br> タグに頼ろうとしているように見えますか? おそらく、CSS を使用して iframe をスタイリングすると役立つでしょう。通常、その iFrame のようなコンテンツを 2 番目の 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;
}
于 2014-02-08T22:15:46.840 に答える