Initialising Google Earth Plugin after page load leads to empty page

Question

I am building a page which relies on the Google Earth plugin. The page is built using require.js and backbone. I want to initialise the Google Earth plugin when a given part of the page is navigated to (e.g. a particular backbone route is triggered).

However, if the google earth plugin is initialised (via google.load('earth', '1');) after the page load then the contents of the page is replaced with the generated script tag - e.g.:

<script src="https://www.google.com/uds/?file=earth&amp;v=1" type="text/javascript"></script>
<script src="https://www.google.com/uds/api/earth/1.1/109c7b2bae7fe6cc34ea875176165d81/default.I.js" type="text/javascript"></script>

And the page disappears.

Is there a way to initialise the plugin after page load or do I need to resort to some code in the HEAD to initialise things and then only call google.earth.createInstance when I'm ready to display it?

Answer 1

And just after posting I finally find the answer here:

google.load(
    'earth',
    '1',
    {
        'callback': function()
        {
            // what was in the google.setOnLoadCallback 
            // in the GE plugin examples 
        }
    }
);

(assuming you already included the <script> tag pointing to https://www.google.com/jsapi ). Passing in a callback as part of the third parameter to google.load apparently stops it from writing script tags to your document and overwriting whatever else was there!