JacobH1994 / google-maps-utility-library-v3

Automatically exported from code.google.com/p/google-maps-utility-library-v3
Apache License 2.0
0 stars 0 forks source link

The Earth view is not working when using other jquery ui componenets in the code #289

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago

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