Hello. I am writing a portal on Yii 2.0. Connected google map. I deduce everything in the view. I use the bootstrap tabs. So that's the problem, the first tab is displayed normally and the data is loaded, and tab 3 (the one with the card) loads only the Google block of the map (gray). If the card is made in the first tab then all the rules.

  • 2
    Let's wait for telepaths - u_mulder

3 answers 3

The framework has nothing to do with it. Everything works fine. Here is an example on the bootstrap tabs:

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); body { margin: 10px; } 
 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Map 1</a> </li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Map 2</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2818.0283604045553!2d7.669722316214226!3d45.064935768015374!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47886d148758bd89%3A0x961d0199f0fca9b9!2sStamperia!5e0!3m2!1sru!2sru!4v1461302891281" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> </div> <div role="tabpanel" class="tab-pane" id="profile"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3039.2663326103966!2d49.832097416141096!3d40.38078946574716!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40307d90ac16005d%3A0x567b7aafe6b4e062!2sMax+Print!5e0!3m2!1sru!2sru!4v1461302926529" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> </div> </div> </div>

  • You have frames inside the tabs, and my coordinators are pulling in from the database - Mykola Shkit
  • Then please share the code. Let static data be used as data from the database - Urmuz Tagizade
  • can shove it in pjax - Mykola Shkit
  • also an option ... - Urmuz Tagizade
  • but if you stuff it, these are completely different blocks - Mykola Shkit
 Контролер <?php namespace frontend\widgets; use dosamigos\google\maps\LatLng; use dosamigos\google\maps\Map; use dosamigos\google\maps\overlays\Marker; use yii\bootstrap\Widget; class MapWidget extends Widget { public $location; public $name; public $params = array(); public function run(){ $coords = str_replace(['(',')'],'',$this->location); $coords = explode(',',$coords); //print_r($coords); die; $coord = new LatLng(['lat' => $coords[0], 'lng' => $coords[1]]); $map = new Map([ 'center' => $coord, 'zoom' => 15, ]); $marker = new Marker([ 'position' => $coord, 'title' => $this->name, ]); $map->addOverlay($marker); return $this->render('Maps', ['map' => $map]); } }

Widget view

 <?=$map->display()?>

Call widget

 <div> <!-- Навигация --> <ul class="nav nav-tabs" role="tablist"> <li class="active"><a href="#review" aria-controls="review" role="tab" data-toggle="tab">Обзор</a></li> <li><a href="#photo" aria-controls="photo" role="tab" data-toggle="tab">Фото</a></li> <li><a href="#maps" aria-controls="maps" role="tab" data-toggle="tab">Карта</a></li> <li><a href="#reviews" aria-controls="reviews" role="tab" data-toggle="tab">Отзывы</a></li> </ul> <!-- Содержимое вкладок --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="review"><?=$result['description']?></div> <div role="tabpanel" class="tab-pane" id="photo"> </div> <div role="tabpanel" class="tab-pane" id="maps"> <?php echo \frontend\widgets\MapWidget::widget(array('location'=>$result['location'], 'name'=>$result['name'])); ?> </div> <div role="tabpanel" class="tab-pane" id="reviews"> <?php echo \frontend\widgets\CommentWidget::widget(array('from'=>$result['id'])); ?> </div> </div> </div>
  • The database location stores the value (50.456962,30.365421) latitude and longitude - Mykola Shkit
  • I do not know what could be the problem - Mykola Shkit

Faced with a similar problem.

A quick solution to the problem: initially, before the page loads, in the code make the tab # 3 active:

 <li role="presentation" class="active"><a href="#">Google Map</a></li>

Next, when loading the page, change the “activity” of the Bootstrap tabs using jQuery, something like this:

 jQuery(document).ready(function () { $('#blockTabs a:first').tab('show'); });

As a result, it turns out that when you load the page, the tab with Google Map will be active and will load accordingly. But after all the scripts have been executed, the tabs will “get up” in the right order.