Google Maps Embed с вкладками Dynamic Drive (НЕ вкладки jquery-ui)

Question

Потратив целый день на чтение этой распространенной проблемы, люди сталкиваются с программой встраивания карт 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 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, который будет загружать карты при нажатии Контакты. У кого-нибудь есть предложения по загрузке карт только тогда, когда это событие произойдет?

Answer 1

Вопрос, на который вы ссылаетесь из Stackru, кажется, не соответствует вашим потребностям, так как здесь используется Javascript API карт Google.

Я предполагаю, что при использовании ваших вкладок Javascript не смог вычислить начальную ширину и высоту iframe, чтобы отцентрировать его.

Я не мог использовать вкладки динамического содержимого, так как ссылки на вкладки якоря не работают на демонстрационной странице. Хотя мне удалось использовать встроенные карты Google в JsFiddle с чистыми вкладками 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

Мне кажется, вы пытаетесь положиться на теги
для макета? Возможно, стилизация iframe с помощью CSS поможет. Как правило, я помещаю содержимое, подобное этому 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;
}