Здравствуйте. Пишу портал на Yii 2.0. Подключил гугл мапс. Вывожу все во вьюшку. При этом использую вкладки бутстрапа. Так вот в чем проблема, первая вкладка выводится нормально и данные загружены, а вкладка 3 (та что с картой) подгружает только самый блок гугл мапс (серый). Если карту сделать в первую вкладку то все норм.
3 ответа
Фреймворк не причем. Все отлично работает. Вот пример на 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>
-
У вас внутри вкладок фреймы, а у меня подтягиваются координаторы с базы даных 22 апр 2016 в 7:02
-
Тогда будьте добры - поделитесь кодом пожалуйста. В качестве данных из бд пусть будут статичные данные 22 апр 2016 в 7:08
-
-
-
Контролер
<?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]);
}
}
Вьюха виджета
<?=$map->display()?>
Вызов виджета
<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>
-
В базе location хранятся значение (50.456962,30.365421) широта и долгота 22 апр 2016 в 7:43
-
Сталкивался с подобной проблемой.
Быстрое решение проблемы: изначально, до загрузки страницы, в коде сделайте вкладку №3 активной:
<li role="presentation" class="active"><a href="#">Google Map</a></li>
Далее, при загрузке странице, измените "активность" вкладок Бутстрапа с помощью JQuery, что-то вроде того:
jQuery(document).ready(function () {
$('#blockTabs a:first').tab('show');
});
В итоге, получится, что при загрузке страницы вкладка с Google Map будет активной и сооответственно загрузится. А вот после выполнения всех скриптов вкладки "встанут" в нужном порядке