Error Loading The Google Map In A Tab.


I’m using the Yii egmap extension in order to generate maps of google maps. The problem is that when I generate them in a created tab with the CJuiTabs widget, the map doesn’t load and I get the following error:

ReferenceError: google is not defined  


However, the map can be generated out of the tab. For example, if I open the browser and I load the URL: http://localhost/index.php?r=zonas/mapa&id=207 the map is generated.

Why does this problem happens? How can I solve it? Thank you.

Here I put the code.

CJuiTabs view:






        Yii::t('default', 'Mapa')=>array('ajax'=>Yii::app()->createUrl('zonas/mapa', array('id'=>$model->id))),

        Yii::t('default', 'Datos')=>array('ajax'=>Yii::app()->createUrl('zonas/datos', array('id'=>$model->id))),

        Yii::t('default', 'Gráficas')=>array('ajax'=>Yii::app()->createUrl('zonas/grafica', array('id'=>$model->id))),


    // additional javascript options for the tabs plugin






Controller action:

 public function actionMapa($id)


                $model = $this->loadModel($id);



Map view:




$gMap = new EGMap();



$gMap->zoom = 10;

$mapTypeControlOptions = array(

   'position'=> EGMapControlPosition::LEFT_BOTTOM,




$gMap->mapTypeControlOptions= $mapTypeControlOptions;

$gMap->enableKMLService(Yii::app()->getBaseUrl(true).'/'.Yii::app()->params['dirMapas'].'microsectores.kml', true);



Was a solution ever found for this issue?

I had almost the same problem, and I found a way to solve it.

Actually, I don’t use EGMaps but I use the Google Maps API V3.

Here’s my CjuiTabs view :



	$cs->registerScriptFile('url to the js', CClientScript::POS_HEAD);

        $this->widget('zii.widgets.jui.CJuiTabs', array(


		'tabs' => array(

			'Liste' => array('ajax'=>Yii::app()->createUrl('//search/formListe')),

			'Carte' => array('content'=>'<div id="googleMap"></div>', 'id'=>'tabCarte')),

		'options' => array('collapsible' => false),







		show: function(event, ui){ //I use show event in order to trigger the code after the content loading in the tab

			if(ui.index==1) // The "Carte" tab


			        // Map Initialization

				var mapOptions ={zoom: 17, center: new google.maps.LatLng(50.461384, 4.869750)};

				var map= new google.maps.Map(document.getElementById('googleMap'),mapOptions);






I don’t even need to go through a controller action (unless you have something else than your map in your map view), I simply put a div with the right id in the tab content, and it works great !

Hope it helps somehow ;)