Error Loading The Google Map In A Tab.

Yii 1.1 General Discussion
1

Hello

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  

google.load("maps","3",{'other_params':'sensor=false'});

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:




?php


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

    'id'=>'zonas_tab',

    'tabs'=>array(

   

        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

    'options'=>array(

        'collapsible'=>true,

    ),

));


?>

Controller action:




 public function actionMapa($id)

        {

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

                $this->renderPartial('_viewMapa',array('model'=>$model),false,true);    

        }

Map view:




<?php


Yii::import('ext.gmap.*');

 

$gMap = new EGMap();

$gMap->setWidth('100%');

$gMap->setJsName('map');

$gMap->zoom = 10;

$mapTypeControlOptions = array(

   'position'=> EGMapControlPosition::LEFT_BOTTOM,

   'style'=>EGMap::MAPTYPECONTROL_STYLE_DROPDOWN_MENU

);

 

$gMap->mapTypeControlOptions= $mapTypeControlOptions;

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

$gMap->renderMap();




?>
2

Was a solution ever found for this issue?

3

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 :




<?php

	$cs=Yii::app()->clientScript;

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


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

		'id'=>'formTabs',

		'tabs' => array(

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

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

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

		'htmlOptions'=>array('style'=>'border:none;padding:0;'),

	));

?>

<script>

$(document).ready(function(){

	$('#formTabs').tabs({

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

			}

		}

	});

});

</script>

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