Ctabview And Jquery-Gmap Problem

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!

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

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

Ah, I see.

I’m sorry, but I don’t have an experience with a google map inside a tab.