標簽未加載-引導標簽

Question

我有一個顯示位置的頁面。 我有兩個標簽，一個用於googmaps，一個用於天氣。

例如，此位置http://www.places4two.de/location/date-in-mozart-stuben/45/

但是如果看到的話，如果切換到“天氣”標簽，則該標簽未完全加載。 如果我首先啟用天氣標簽，則googlemaps標簽未完全加載。

我在這里做錯了什么？

這是代碼：

  $('#myTab a').click(function (e) {
     e.preventDefault();
     $(this).tab('show');
  });

HTML

<div style="padding-left: 75px">
  <ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#lage">Lage</a></li>
    <li><a href="#wetter">Wetter</a></li>
  </ul>
</div> 
<div class="tab-content">
  <div class="tab-pane active" id="lage">
     <div id="map-canvas" style="max-width: 1100px; height: 350px"> </div>
  </div>
  <div class="tab-pane" id="wetter">
     <div id="basicMap" style="max-width: 1100px; height: 350px"> </div>    
  </div>                  
</div>

非常感謝您的幫助

Answer 1

    $('a[href="#lage"]').on('shown', function(e) {
        google.maps.event.trigger(map, 'resize');
    });

    $('#myTab a[href="#lage"]').on('shown', function(){
        google.maps.event.trigger(map, 'resize');
        map.setCenter(latlng);
    });

在選項卡上調用地圖時，需要調整地圖的大小。

Answer 2

我用另一種方式解決了這個問題。

$(function(){
$('#wetter').hide();
 $('#wetteron').click(function (e) {
        e.preventDefault();
        $('#lage').hide();
        $('#wetter').show();
        $('#lageon').parent('li').removeClass('active');
        $(this).parent('li').addClass('active');                                
     });
     $('#lageon').click(function (e) {
        e.preventDefault();
        $('#wetter').hide();
        $('#lage').show();
        $('#wetteron').parent('li').removeClass('active');
        $(this).parent('li').addClass('active');
     });
});

添加了HTML

<li class="active"><a href="#lage" id="lageon">Lage</a></li>
<li><a href="#wetter" id="wetteron">Wetter</a></li>