Reputation: 43899
I am trying to use the Google Earth plug-in, and have found that it's rather particular about how it is called: if called outside the main flow of the Javascript execution (via setTimeout, for example), it simply refuses to call the load callback. The example below is self-contained illustration. Change change which of the last two lines is commented out to see it work or not.
What's going on?
<html>
<head>
<title>Sample</title>
<script type="text/javascript" src="https://www.google.com/jsapi"> </script>
<script type="text/javascript">
var ge;
function init() {
console.log('Initing');
function cb(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
console.log('Ok');
};
function fail() {}
google.earth.createInstance('map3d', cb, fail);
}
function loadTheMap() {
google.load("earth", "1.x");
google.setOnLoadCallback(init);
console.log('Callback is set');
}
//loadTheMap(); // works
setTimeout(loadTheMap, 200); // Does not work
</script>
</head>
<body>
<div id="map3d" style="height: 400px; width: 600px;"></div>
</body>
</html>
Upvotes: 3
Views: 1883
Reputation: 5966
This is a timing problem.
google.setOnLoadCallback()
lets you specify a function that is called when the page loads.
When you use setTimeout()
like that, it is calling setOnLoadCallback()
after the page has already loaded, so it never calls your function.
Instead of using google.setOnLoadCallback()
you could do this:
function loadTheMap() {
google.load("earth", "1.x", {"callback" : init});
console.log('Callback is set');
}
setTimeout(loadTheMap, 200);
I'm a little confused though, because the Google docs say that dynamic loading is not supported for Earth, but I've seen it done in the api samples, and it works for me (in Chrome).
Upvotes: 6