GoogleMaps не отображается на неактивной вкладке (Yii2)

Question

Я использую Kartik tabs-x и yii2-google-maps-marker.

Если вкладка 2 установлена ​​активна, отображается правильная версия googleMap.

Но, если я установить на вкладке 1 (не 2) к активным, Googlemap неправильно показывает.

Это Tab-й в поле зрения.

<?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 
    ]); 
    ?> 

Это вид карты.

<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

Если Google Maps находится внутри div, что имеет display:none стиль, или его родителей, или это родитель родителя (любой предшественник) имеет display:none стиль, вид карты не инициализируется правильно. Но не стоит беспокоиться, есть простое решение, вам просто нужно вызвать событие resize на карте. Таким образом, с помощью JavaScript, после переключения на нужную вкладку (должно быть после, поэтому Google Maps DIV уже виден!) Просто позвоните:

google.maps.event.trigger(yii.googleMapManager.map, "resize"); 

кажется вы работаете с TabX, поэтому, вероятно, вы знаете, как лучше определить когда нажата вкладка. Но в случае, если вы этого не сделаете, возможно, попробуйте атрибут pluginEvents. По docs вы должны быть в состоянии сделать это:

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 обновление: Изменено время ожидания от 10 до 200.