phabion
(Trinhduyhung1985)
December 9, 2012, 2:49pm
1
Hello everyone!
I’m using CTabView for my view and to display google map I’m using jquery-gmap extension that can be found from here . The map is inside one of my tab. I don’t know why the map doesn’t display properly when it’s using together with CTabView. I’ve searched around and found this . My view is like this:
<?php
Yii::import('ext.jquery-gmap.jquery-gmap.*');
$gmap = new EGmap3Widget();
$gmap->setSize(800, 600);
// base options
$options = array(
'scaleControl' => true,
'streetViewControl' => false,
'zoom' => 1,
'center' => array(0, 0),
'mapTypeId' => EGmap3MApTypeId::ROADMAP,
'mapTypeControlOptions' => array(
'style' => EGmap3MapTypeControlStyle::DROPDOWN_MENU,
'position' => EGmap3ControlPosition::TOP_CENTER,
),
'zoomControlOptions' => array(
'style' => EGmap3ZoomControlStyle::SMALL,
'position' => EGmap3ControlPosition::BOTTOM_CENTER
),
);
$gmap->setOptions($options);
$marker = new EGmap3Marker(array('title' => CHtml::encode(Hotel::model()->findByPk($model->hotel_id)->hotel_name)));
$marker->latLng = array($model->hotel_lat, $model->hotel_lng);
$marker->centerOnMap();
$marker->setMapZoom(10);
$gmap->add($marker);
$gmap->renderMap();
$click_script = <<<script
$('#tab5').click(function(){
google.maps.event.trigger(gmap, "resize");
})
SCRIPT;
Yii::app()->getClientScript()->registerScript("resizemap_js", $click_script, CClientScript::POS_END);
?>
But the map looks still incorrectly.
3580
Capture.PNG
What should I do to run out of this problem?
Any help would be appreciated!
softark
(Softark)
December 9, 2012, 3:23pm
2
$click_script = <<<script
$('#tab5').click(function(){
google.maps.event.trigger(gmap, "resize");
})
SCRIPT;
Yii::app()->getClientScript()->registerScript("resizemap_js", $click_script, CClientScript::POS_END);
?>
Don’t you have any javascript error in your browser’s developer tool?
A semi-colon is missing at the end, I guess.
$click_script = <<<script
$('#tab5').click(function(){
google.maps.event.trigger(gmap, "resize");
});
SCRIPT;
phabion
(Trinhduyhung1985)
December 10, 2012, 1:28am
3
softark:
Don’t you have any javascript error in your browser’s developer tool?
A semi-colon is missing at the end, I guess.
$click_script = <<<script
$('#tab5').click(function(){
google.maps.event.trigger(gmap, "resize");
});
SCRIPT;
It’s still not working correctly.
softark
(Softark)
December 10, 2012, 1:52am
4
Does the event handler get called?
$('#tab5').click(function(){
alert("called");
google.maps.event.trigger(gmap, "resize");
});
If it’s not called, try this:
$('body').on('click', '#tab5', function(){
alert("called");
google.maps.event.trigger(gmap, "resize");
});
phabion
(Trinhduyhung1985)
December 10, 2012, 7:49am
5
softark:
Does the event handler get called?
$('#tab5').click(function(){
alert("called");
google.maps.event.trigger(gmap, "resize");
});
If it’s not called, try this:
$('body').on('click', '#tab5', function(){
alert("called");
google.maps.event.trigger(gmap, "resize");
});
First I’ve tried first snippet. The event handler get called after clicking on the content area of tab5 (not after clicking on the tab), but the map stayed the same.
The same thing is happened to the second snippet also.
Today I just have tried TbTabs, that comes from yii-bootrap extension. The same thing happened. Quite sad
softark
(Softark)
December 10, 2012, 8:22am
6
Ah, I see.
I’m sorry, but I don’t have an experience with a google map inside a tab.