Встраивание карт Google с вкладками динамического диска (НЕ вкладки jquery-ui)

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


google-maps javascript html jquery google-maps-embed
person Outdated Computer Tech    schedule 04.02.2014    source источник
comment
В чем проблема? Карта не отцентрирована в правильном месте или iframe не отцентрован должным образом?   -  person Bryan Rayner    schedule 09.02.2014
comment
похоже на это: stackoverflow.com/questions/1428178/   -  person Outdated Computer Tech    schedule 09.02.2014
comment
но я не использую вкладки jquery ui.   -  person Outdated Computer Tech    schedule 09.02.2014
comment
Я чувствую, что это не актуально. В этом вопросе используется API Карт Google для создания карты прямо на вашей странице. Вы используете iframe, а это совсем другой подход.   -  person Bryan Rayner    schedule 09.02.2014
comment
не совсем, потому что, когда они решают проблему, они запускают событие, когда javascript обнаруживает /index.php#something появляется, сделайте ЭТО. мой скрипт не работает таким образом, он не запускает # расширение на странице, как вкладки jquery ui. Я безуспешно искал неделю подряд. и большинство ответов, которые я нахожу, используют вкладки jquery ui как способ решения проблемы, возможно, я недостаточно знаю о javascript, чтобы использовать их метод для моей работы. поэтому я назначил награду.   -  person Outdated Computer Tech    schedule 11.02.2014
comment
Можете подробнее описать проблему? Я имею в виду, что именно не работает? Карта не загружается, карта неправильно центрирована ... Можете ли вы разместить демонстрацию проблемы где-нибудь на JSBin?   -  person Bryan Rayner    schedule 12.02.2014
comment
Это ХОРОШО задокументированная проблема с картами Google с вкладками, если на вашей странице работают динамические вкладки, то есть вкладки НЕ перезагружают новую страницу, когда вы нажимаете на вкладку, карта Google не отображает страницу правильно, когда вы нажимаете на вкладка, отображающая рассматриваемую карту. ПИН-код в центре карты не по центру. Это проблема. stackoverflow.com/questions/1428178/   -  person Outdated Computer Tech    schedule 12.02.2014
comment
google.com/#q=google+maps+tabs+problem   -  person Outdated Computer Tech    schedule 12.02.2014

Ответы (2)


arrow_upward
2
arrow_downward

Вопрос, на который вы ссылаетесь из StackOverflow, похоже, не соответствует вашим потребностям, поскольку используется 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/

person vorillaz    schedule 09.02.2014
comment
Мне больше нравится карта во вкладке с шириной 100%. Например, http://jsfiddle.net/bKaxg/345/. - person David Streck; 10.02.2014
comment
ваш последний пример, это мой сценарий, если вы заметили, что вкладка, на которую вы попадаете, должна исправлять булавку в середине, а остальные вкладки неверны. Это текущая проблема, ваша первая строка css не решает эту проблему, когда человек входит на веб-сайт, он не находится на вкладке контактов, когда они получают вкладку контактов, карта смещена по центру, следовательно, ваша вкладка2 , 3, 4. также: ни один из ваших примеров на самом деле не работает, кроме первого - ›bKaxg / 342, но я не хочу менять структуру вкладок на данном этапе. - person Outdated Computer Tech; 11.02.2014
comment
О, понятно, пожалуйста, прочтите документацию по встраиванию карт Google. Я поигрался с шириной и высотой карты, чтобы предоставить общее решение для центрирования фактической карты. Если вы хотите, чтобы маркер был в центре, вам нужно поиграть с JavaScript API или попытаться создать новую встроенную карту. - person vorillaz; 11.02.2014
comment
Дело не в маркере, а в том, что карта находится в центре, где находится фактическое местоположение, а не в стороне. - person Outdated Computer Tech; 12.02.2014
comment
Добавьте указанную высоту и ширину в iframe, и карта будет по центру. Предоставленный вами iframe отображается одинаково внутри и снаружи вкладок. Проверьте скрипт обновления jsfiddle.net/DqZT8/5 - person vorillaz; 12.02.2014
comment
Кажется, мы не на той странице, вы явно не читали мои комментарии, которые я опубликовал после того, как вы опубликовали свой ответ. Это ХОРОШО задокументированная проблема с картами Google с вкладками, если на вашей странице работают динамические вкладки, то есть вкладки НЕ перезагружают новую страницу, когда вы нажимаете на вкладку, карта Google не отображает страницу правильно, когда вы нажимаете на вкладка, отображающая рассматриваемую карту. Ни один из ваших примеров не работает, кроме примера CSS Tabs. ПИН-код в центре карты не отцентрован, разве вы не заметили, что только 1 карта была правильно отцентрирована, а остальные нет? Это проблема. - person Outdated Computer Tech; 12.02.2014

arrow_upward
0
arrow_downward

Мне кажется, что вы пытаетесь полагаться на теги ‹br> для макета? Возможно, вам поможет стилизация 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;
}
person Bryan Rayner    schedule 08.02.2014
comment
Я использую 4 ‹br›, чтобы разместить карту в середине текущей вкладки. это не решило мою проблему, обратитесь к jsfiddle.net/DqZT8/3, это то, что работает скрипт выключенный. Я не понимаю, какое ‹br› имеет какое-либо отношение к моему сценарию. - person Outdated Computer Tech; 11.02.2014