The Earth view is not working when using other jquery ui componenets in the code
GoogleCodeExporter opened this issue · 0 comments
GoogleCodeExporter commented
Hi,
I am trying to use google maps utility library to integrate google earth with
google maps v3,
it works perfectly well when my page has no code related to jquery ui, once I
add jquery component or just import the library of jquery ui the earth tab does
not show, switching to map or satellite view will also not work afterwards,
I very much need to use with other jquery components and plugins, any idea why
this happens, or how to fix it?,
Your cooperation is highly appreciated,
Many thanks,
Hala
sample code:
<?php
/* @var $this SiteController */
/* @var $model ContactForm */
/* @var $form CActiveForm */
$this->pageTitle=Yii::app()->name . ' - Contact Us';
$this->breadcrumbs=array(
'Contact',
);
// omitting these two lines along with any jquery component will fix the problem
Yii::app()->clientScript->registerCoreScript('jquery');
Yii::app()->clientScript->registerCoreScript('jquery.ui');
?>
<h1>Contact Us</h1>
<!-- Google maps API v3 -->
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?v=3.exp&sensor=false"></script>
<!-- Google earth API -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<!-- to integrate Google earth and Google maps in one component -->
<script type="text/javascript" src="<?php echo
Yii::app()->request->baseUrl;?>/js/googleearth-compiled.js"></script>
<script>
var map;
var ge;
google.load('earth', '1');
function initGMap(){
map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(34, -100),
zoom: 10,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP // ?needs to be set here
});
ge = new GoogleEarth(map);
}
google.maps.event.addDomListener(window, 'load', initGMap);
</script>
<?php
$this->widget('zii.widgets.jui.CJuiAccordion', array(
'panels' => array(
//'Toggle Species' => 'content for panel 1',
'Change Location' => 'content for panel 2',
'Track Sensor' => 'content for panel 2',
'Generate City' => 'content for panel 2',
'Filter' => 'content for filter',
//'Parse KML' => 'content for panel 2',
//'Fly' => 'content for panel 2',
),
// additional javascript options for the accordion plugin
'options' => array(
'animated' => 'bounceslide',
'heightStyle' => 'content',
),
));
?>
<h1>Earth V3</h1>
<div id="map" class="google-maps" style="width:800px;height:600px"></div>
Original issue reported on code.google.com by halou...@gmail.com
on 9 Jan 2014 at 12:40