多個自舉摺疊div上的映射

Question

我有兩個可摺疊的引導div。 在每個div中，我從谷歌地圖插入一張地圖。第一個工作正常，但第二個以灰色背景打開，並且地圖不加載。

我調整了地圖的大小，但它不起作用。

我的HTML

<div class="content"> 
<div class="more"> 
<a data-toggle="collapse" class="as" href="#extra-1">info</a> 
</div> 
</div> 
<div id="extra-1" class="extra-info collapse"> 
<div class="maps" data-lon="2.159154" data-lat="41.397207"></div> 
</div> 
<div class="content"> 
<div class="more"> 
<a data-toggle="collapse" class="as" href="#extra-2">info</a> 
</div> 
</div> 
<div id="extra-2" class="extra-info collapse"> 
<div class="maps" data-lon="2.159154" data-lat="41.397207"></div> 
</div> 

和JS

$(document).ready(function() { 

    window.obj = window.obj || {}; 
     var obj = window.obj; 
obj.mapRendering = { 
      eachMap: $('.extra-info'), 

      init: function() { 
       this.oneMap(); 
      }, 

      oneMap: function(){ 
       var that = this; 

       this.eachMap.each(function(a, b){ 
        $(b).on('show.bs.collapse', function(){ 

         if($(this).attr("loaded") == "true") { 
          console.log("revisited"); 
          return this; 
         } 

         var selector = $(this).find('.maps'); 
         console.log(selector[0]); 

         var lati = selector.attr("data-lat"); 
         var longi = selector.attr("data-lon"); 

         var latlng = new google.maps.LatLng(parseFloat(lati),parseFloat(longi)); 
         var myOptions = { 
          zoom: 16, 
          center: latlng, 
          mapTypeId: google.maps.MapTypeId.ROADMAP, 
          disableDefaultUI: true, 
          mapTypeControl: false, 
          zoomControl: true 
         }; 
         var map = []; 
         map[a] = new google.maps.Map(selector[0], myOptions); 

         google.maps.event.trigger(map[a], 'resize'); 
         $(this).attr("loaded", "true"); 

         return this; 
        }); 
       }); 
      } 
     }; 
obj.mapRendering.init(); 
    }); 

fiddle

謝謝，亞歷克斯。

Answer 1

您可能需要更改bootstrap上的回調函數，以便在動畫完成時調用Google地圖。因此，而不是：

$(b).on('show.bs.collapse', function(){ 
    ... 
})

你必須：

$(b).on('shown.bs.collapse', function(){ 
    ... 
})