Bootstrap选项卡中的多个Google地图 [英] Multiple Google Maps within Bootstrap Tabs
问题描述
我有一个bootstrap标签结构，每个标签内都有一个google map iframe。第一个标签页的iframe看起来不错，但其他标签看起来没什么用处，也没有看过。这不是关于iframe src代码，因为我试图用第二个和其他代替第一个;第一个总是正常工作。
我已经看到了一些解决方案，但没有一个为我工作;我不会通过javascript生成地图（我认为它会有点复杂，因为有11个选项卡，意味着11个地图可以与JS分开触发）。
我怎样才能让他们看起来像第一个？
< ul id =tablistclass =nav mt20角色= 标签列表 >
< li role =presentationclass =active>
< a href =＃location1aria-controls =location1role =tabdata-toggle =tab>EDİRNE< / a>
< / li>
< li role =presentation>
< a href =＃location2aria-controls =location2role =tabdata-toggle =tab>İSTANBUL< / a>
< / li>
< li role =presentation>
< a href =＃location3aria-controls =location3role =tabdata-toggle =tab>İSTANBUL< / a>
< / li>
< / ul>
< div class =tab-content>
< div role =tabpanelclass =tab-pane activeid =location1>
< h2> Edirne< / h2>
< div class =map>
< / div>
< / div>
< div role =tabpanelclass =tab-paneid =location2>
< h2>伊斯坦布尔/Ümraniye< / h2>
< div class =map>
< / div>
< / div>
< div role =tabpanelclass =tab-paneid =location3>
< h2> Buyaka< / h2>
< div class =map>
< / div>
< / div>
< / div>
可能的方法：
当第一次激活标签页时，通过js创建iframe（并不复杂）。
标记：
Store在 div.map 的属性中的iframe - src ，例如而不是：
< div class =map>
< iframe src =https：//www.google.com / .......>< / iframe>
< / div>
only this：
< div class =mapdata-map =https：//www.google.com / .......>< / div>
创建iframe的脚本：
<$ on（'shown.bs.tab'，function（e））on（'shown.bs.tab'），函数（）函数返回一个数组， {
var that = $（$（e.target）.attr（'href'））。find（'。map'）;
if（！that.find（'iframe'）。length ）{
that.append（$（'< iframe />'，{src：that.data（'map'）}）
.css（{height：'300px'，width： '100％'，border：'none'}））;
}
}）。first（）。trigger（'shown.bs.tab'）;
}）;
演示： http://jsfiddle.net/doktormolle/x8gkx64k/
I have a bootstrap tab structure with a single google map iframe inside each tab. The first tab's iframe looks fine but other ones look unzoomed and uncentered. It's not about the iframe src code because I tried replacing the first one with second and others; the first one always works fine.
I have seen some solutions but none of them worked for me; I don't generate the maps by javascript (I thought it would be a bit complicated 'coz there are 11 tabs, meaning 11 maps to be triggered separately from JS).
How can I make them look as the first one?
<ul id="tablist" class="nav mt20" role="tablist">
<li role="presentation" class="active">
<a href="#location1" aria-controls="location1" role="tab" data-toggle="tab">EDİRNE</a>
</li>
<li role="presentation">
<a href="#location2" aria-controls="location2" role="tab" data-toggle="tab">İSTANBUL</a>
</li>
<li role="presentation">
<a href="#location3" aria-controls="location3" role="tab" data-toggle="tab">İSTANBUL</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="location1">
<h2>Edirne</h2>
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1490.0295508854501!2d26.554026500000006!3d41.676066999999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14b32f70d8d07e91%3A0x66cefa22bb2159ed!2sTahmis+Sk%2C+Sabuni+Mh.%2C+22030+Edirne%2C+T%C3%BCrkiye!5e0!3m2!1str!2s!4v1417465718288" width="100%" height="300" frameborder="0" style="border:0"></iframe>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="location2">
<h2>İstanbul / Ümraniye</h2>
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1505.0782255145343!2d29.11706899999999!3d41.021833000000015!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14cac8c2a634cb7d%3A0x2a689ffda344dbd3!2zQWxlbWRhxJ8gQ2QsIDM0Mzk4IMSwc3RhbmJ1bCwgVMO8cmtpeWU!5e0!3m2!1str!2s!4v1417467819597" width="100%" height="300" frameborder="0" style="border:0"></iframe>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="location3">
<h2>Buyaka</h2>
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6019.895047795627!2d29.126492999999996!3d41.02640399999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14cac8dbf23cc11f%3A0x726fb77d4e9c67c5!2sBuyaka!5e0!3m2!1str!2s!4v1417468135827" width="100%" height="300" frameborder="0" style="border:0"></iframe>
</div>
</div>
</div>
Possible approach:
Create the iframes via js(it's not complicated) when a tab has been activated the first time.
The markup:
Store the iframe-src in a attribute of the div.map, e.g. instead of:
<div class="map">
<iframe src="https://www.google.com/......."></iframe>
</div>
only this:
<div class="map" data-map="https://www.google.com/......." ></div>
The script which creates the iframes:
$(function(){
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var that=$($(e.target).attr('href')).find('.map');
if(!that.find('iframe').length){
that.append($('<iframe/>',{src:that.data('map')})
.css({height:'300px',width:'100%',border:'none'}));
}
}).first().trigger('shown.bs.tab');
});
Demo: http://jsfiddle.net/doktormolle/x8gkx64k/
这篇关于Bootstrap选项卡中的多个Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
