Why not see the map in the GoogleMaps tab (tabs) Bootsrap?

Good time of day.
The theme supports the display of the map (you select the desired point and in the post is displayed in the map view). But in functionality it was necessary to organize content into tabs, which I did. There was a problem with the card. Instead (it is in tab 4) displays an empty rectangle.

The map itself is loaded, but much later than expected. About a minute you can sit to proglatyvat website and then she will appear and not the fact.
How can I fix it?

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


The part of the card:

{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 = [
 { feature: "landscape", stylers: [
 { visibility: "{if $settings->mapDisplayLandscapeShow == false}off{else}on{/if}"},
]
},
 { feature: "administrative", stylers: [
 { visibility: "{if $settings->mapDisplayAdministrativeShow == false}off{else}on{/if}"},
]
},
 { feature: "road", stylers: [
 { visibility: "{if $settings->mapDisplayRoadsShow == false}off{else}on{/if}"},
]
},
 { feature: "water", stylers: [
 { visibility: "{if $settings->mapDisplayWaterShow == false}off{else}on{/if}"},
]
},
 { feature: "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}
August 23rd 19 at 12:01
0 answer

Find more questions by tags BootstrapHTMLPHPWordPress