Bootstrap选项卡中的多个Google地图

我有一个引导标签结构，每个标签内都有一个谷歌地图iframe。 第一个标签的iframe看起来不错，但其他标签看起来很简单，没有中心。 它不是关于iframe src代码，因为我尝试用第二个和其他代替第一个; 第一个总是工作正常。

我见过一些解决方案，但没有一个能为我工作; 我没有通过javascript生成地图（我认为它会有点复杂’因为有11个标签，意味着11个地图将与JS分开触发）。

我怎样才能让它们成为第一个？

 
 EDİRNE 
 
 İSTANBUL 
 
 İSTANBUL 
 
 
 
 
Edirne
 
  
 
 
 
İstanbul / Ümraniye
 
  
 
 
 
Buyaka
 
  
 
  

Answer 1

可能的方法：

第一次激活选项卡时，通过js创建iframe（并不复杂）。

标记：将iframe- src存储在div.map的属性中，例如，而不是：

只有这个：

创建iframe的脚本：

 $(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($('',{src:that.data('map')}) .css({height:'300px',width:'100%',border:'none'})); } }).first().trigger('shown.bs.tab'); }); 

演示： http ： //jsfiddle.net/doktormolle/x8gkx64k/