how can i use google earth API with backbone.js+jquery mobile?

How can i use google earth API with backbone.js+jquery mobile ?

I have created application using backbone.js, underscore.js and jQuery Mobile. For google earth API, I am using sample code listed at https://developers.google.com/earth/documentation/#using_the_google_earth_api

My template rendering, and all other pages are working fine But when i load google earth API in one tag, it's not loading and in js console i get message: "ERR_INVALID_DIV ".

Google.earth module never calls back initCallback, It's always calls failureCallback when google.earth.createInstance is invoked.

I explain some sample code of mine application as under, so based on that may be you get my code structure and it helps you to solve my issue.

my js code as under,

myjs1.js

var ge;
function init() {
  google.earth.createInstance('map3d', initCB, failureCB);
}

function initCB(instance) {
  console.log(' init call back call ');
  ge = instance;
  ge.getWindow().setVisibility(true);
}

function failureCB(errorCode) {
    console.log(errorCode);
}

Now my Backbone code as under,

myjs2.js

WebApp.MyPage= Backbone.View.extend({

initialize:function (result) {
    this.template =_.template($('#myPage').html());
},

render:function (eventName) {
    var self = this;
    mydata = object dict of my data;
    $(self.el).html(self.template({mydata:mydata}));

    google.load("earth", "1");

    init();
    google.setOnLoadCallback(init);

}

Now my HTML code like as under,

<script type="text/template" id="myPage">
    <div data-role="page">
        <div data-role="content">
            <div id="map3d" style="height: 400px; width: 600px;"></div>
        </div>
    </div>
</script>

myhtml.html

Is there any way to fix this?

Any help appreciated.

Solution

The Earth API works with the Google Earth Plugin, which is available only on Windows and Mac OSX. It is not available on mobile devices, sorry!

If you're testing on your Mac or Windows system, you should be able to get it working. The error code ERR_INVALID_DIV sounds like it isn't finding the map3d div. I would put a debugger; statement in the code just before the google.earth.createInstance() call, and then look around in the DOM inspector and see if map3d is in the DOM. It should be coming in from your template if that part is working.

But this won't help you when you try to load your site on a mobile device, because you won't have the Earth plugin available there.