GoogleMaps does not show on inactive tab (Yii2) - google-maps

Question

I'm using Kartik tabs-x and yii2-google-maps-marker.
If the Tab 2 is set active, googleMap shows correctly.
But, If I set the Tab 1 (not 2) to active, googleMap shows incorrectly.
This is Tab-x in view.
<?php
$datsan_tab_items = [
[
'label'=>'<i class="glyphicon glyphicon-calendar"></i>'.Yii::t('app', ' Tab 1'),
'content'=> $this->render('_calendar_dat_san',['ids_sanCon' => $ids_sanCon,
'modelSanCon' => $modelSanCon,
'modelSanChu' => $modelSanChu
]),
'active'=>false
],
[
'label'=>'<i class="glyphicon glyphicon-map-marker"></i>'.Yii::t('app', ' Tab 2'),
'content'=> $this->render('_map',['dc' => $dc, 'modelSanChu' => $modelSanChu]),
'active'=>true,
],
[
'label'=>'<i class="glyphicon glyphicon-usd"></i>'.Yii::t('app', ' Tab 3'),
'content'=> $this->render('_bang_gia',[
'modelSanCon' => $modelSanCon,
'modelSanChu' => $modelSanChu
]),
'active'=>false
],
];
// Tab Chuyen doi giua Login/Register
echo TabsX::widget([
'items'=>$datsan_tab_items,
'position'=>TabsX::POS_ABOVE,
'bordered'=>true,
'encodeLabels'=>false
]);
?>
This is map view.
<div class="datsan-index-thong-tin-ban-do" id="datsan-index-thong-tin-ban-do">
<div class="panel panel-info">
<div class="panel-heading"><?= Yii::t('app', ' Bản Đồ') ?></div> <?php
echo GoogleMaps::widget([
'userLocations' => [
[
'location' => [
'address' => $dc,
'country' => $modelSanChu->dc_quocGia,
],
'htmlContent' => $modelSanChu->ten
],
],
'wrapperHeight' => '350px',
'googleMapsUrlOptions' => [
'key' => Yii::$app->params['GOOGLE_API_KEY'],
]
]);
?>
</div>
</div>

Answer 1

If google maps is inside div that has display:none style, or it's parent, or it's parent's parent (any predecessor) has display:none style, the map view won't initialise correctly. But no worries, there is an easy fix, you just have to trigger resize event on map. So using javascript, AFTER you switch to a desired tab (must be after, so google maps div is already visible!) just call:
google.maps.event.trigger(yii.googleMapManager.map, "resize");
It seems you work with TabX, so probably you know how to best determine when tab was clicked. But in case you don't, maybe give pluginEvents attribute a try. According to docs you should be able to do this:
echo TabsX::widget([
'items'=>$datsan_tab_items,
'position'=>TabsX::POS_ABOVE,
'bordered'=>true,
'encodeLabels'=>false,
'pluginEvents' = [
"tabsX.click" => "function() {
setTimeout(function() {
google.maps.event.trigger(yii.googleMapManager.map, 'resize');
}, 200);
}"
]
]);
Sam updated: Changed timeout from 10 to 200.