Yii Framework Forum: Ctabview And Jquery-Gmap Problem - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Ctabview And Jquery-Gmap Problem Rate Topic: -----

#1 User is offline   Trinh Duy Hung 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 73
  • Joined: 26-October 12

Posted 09 December 2012 - 09:49 AM

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.
Attached File  Capture.PNG (108.84K)
Number of downloads: 18
What should I do to run out of this problem?

Any help would be appreciated!
0

#2 User is offline   softark 

  • Keep It Simple
  • Yii
  • Group: Moderators
  • Posts: 3,131
  • Joined: 16-February 11
  • Location:Japan

Posted 09 December 2012 - 10:23 AM

View PostTrinh Duy Hung, on 09 December 2012 - 09:49 AM, said:

$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;

0

#3 User is offline   Trinh Duy Hung 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 73
  • Joined: 26-October 12

Posted 09 December 2012 - 08:28 PM

View Postsoftark, on 09 December 2012 - 10:23 AM, said:

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. :(
0

#4 User is offline   softark 

  • Keep It Simple
  • Yii
  • Group: Moderators
  • Posts: 3,131
  • Joined: 16-February 11
  • Location:Japan

Posted 09 December 2012 - 08:52 PM

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");
    });

0

#5 User is offline   Trinh Duy Hung 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 73
  • Joined: 26-October 12

Posted 10 December 2012 - 02:49 AM

View Postsoftark, on 09 December 2012 - 08:52 PM, said:

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 :(
0

#6 User is offline   softark 

  • Keep It Simple
  • Yii
  • Group: Moderators
  • Posts: 3,131
  • Joined: 16-February 11
  • Location:Japan

Posted 10 December 2012 - 03:22 AM

Ah, I see.
I'm sorry, but I don't have an experience with a google map inside a tab.
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users