Почему не видно карту GoogleMaps в вкладке (табах) Bootsrap?

Question

[Влад Серов]

Доброго времени суток.
Тема поддерживает функцию вывода карты (выбирается нужная точка и в посте это отображается в виде карты). Но по функционалу необходимо было распределить контент по табам, что я и сделал. Появилась проблема с картой. Вместо неё (она в 4 вкладке) отображается пустой прямоугольник.

Сама карта подгружается, но на много позже чем положено. Где то минуту можно сидеть проклацивать сайт и тогда она появится, и то не факт.
Как можно исправить?

Подключение на странице:

<li data-content="karta">
			{* MAP SECTION *}
			{includePart portal/parts/single-item-map}
			{* MAP SECTION *}
		</li>

Сама часть карты:

{if $meta->headerType !== 'map' && $meta->map['latitude'] && $meta->map['longitude']}
<div class="map-container">
	<div class="content" style="height: {$settings->mapHeight}px">

	</div>
	<script type="text/javascript">
	jQuery(document).ready(function(){
		var $mapContainer = jQuery('.single-ait-item .map-container');
		var $mapContent = $mapContainer.find('.content');

		$mapContent.width($mapContainer.width());

		var styles = [
			{ featureType: "landscape", stylers: [
					{ visibility: "{if $settings->mapDisplayLandscapeShow == false}off{else}on{/if}"},
				]
			},
			{ featureType: "administrative", stylers: [
					{ visibility: "{if $settings->mapDisplayAdministrativeShow == false}off{else}on{/if}"},
				]
			},
			{ featureType: "road", stylers: [
					{ visibility: "{if $settings->mapDisplayRoadsShow == false}off{else}on{/if}"},
				]
			},
			{ featureType: "water", stylers: [
					{ visibility: "{if $settings->mapDisplayWaterShow == false}off{else}on{/if}"},
				]
			},
			{ featureType: "poi", stylers: [
					{ visibility: "{if $settings->mapDisplayPoiShow == false}off{else}on{/if}"},
				]
			},
		];

		var mapdata = {
			latitude: {$meta->map['latitude']},
			longitude: {$meta->map['longitude']}
		}

		$mapContent.gmap3({
			map: {
				options: {
					center: [mapdata.latitude,mapdata.longitude],
					zoom: {!$settings->mapZoom},
					scrollwheel: false,
					styles: styles,
				}
			},
			marker: {
				values:[
					{ latLng:[mapdata.latitude,mapdata.longitude] }
		        ],
			},
		});
	});

	jQuery(window).resize(function(){
		var $mapContainer = jQuery('.single-ait-item .map-container');
		var $mapContent = $mapContainer.find('.content');

		$mapContent.width($mapContainer.width());
	});
	</script>
</div>
{/if}