I have a page where locations are shown. and there i have two tabs, one for googmaps and one for weather.
for example this location http://www.places4two.de/location/date-in-mozart-stuben/45/
but if you see, if you switch to weather tab, the tab is not loaded fully. if i make the weather tab first active, then googlemaps tab is not loaded fully.
what am i doing wrong here?
this is the code:
$('#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>
thanks a lot for help
$('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);
});
You need to resize the map when calling it on tab.
i solved this in another way.
$(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');
});
});
added html
<li class="active"><a href="#lage" id="lageon">Lage</a></li>
<li><a href="#wetter" id="wetteron">Wetter</a></li>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.