Bootstrap选项卡中的多个Google地图

我有一个bootstrap选项卡结构，每个选项卡内有一个google map iframe。第一个标签页的iframe看起来不错，但其他标签看起来没什么用处，也没有看过。这不是关于iframe src代码，因为我试图用第二个和其他代替第一个;第一个总是正常工作。Bootstrap选项卡中的多个Google地图

我已经看到了一些解决方案，但他们都没有为我工作;我没有通过JavaScript生成地图（我认为它会有点复杂，因为有11个选项卡，意味着11个地图需要与JS分开触发）。

我该如何让它们看起来像第一个？

<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>

来源

2014-12-01 Can Goktas

可能的方法：

创建通过JS I帧（它不是复杂）当标签被激活第一次。

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

只有

这样的：

<div class="map" data-map="https://www.google.com/......." ></div>

它创建的I帧的脚本：

$(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'); 
});

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

来源

2014-12-01 23:20:28

真棒答案。我一直在使用另一个jQuery，但是这更好。 – Christina 2014-12-02 04:41:19

Bootstrap选项卡中的多个Google地图

回答

相关问题