вкладка не загружается - вкладка начальной загрузки

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>