Uncaught google.earth not loaded

Question

I'm doing this to add Google Earth to Google Maps v3:

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

  // map options
  var options = mapster.MAP_OPTIONS,
  element = document.getElementById('map-canvas'),

  // map
  map = mapster.create(element, options);

  var ge = new GoogleEarth(map);

The script on my html file looks like this:

 <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
  <script src="https://www.google.com/jsapi"></script>
  <script src="googleearth.js"></script>
  <script src="script.js"></script>

I keep getting Uncaught google.earth not loaded and not sure what I did wrong.

I'm using this reference: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/googleearth/docs/reference.html

Here's my full code in case it helps: http://plnkr.co/edit/NlPF3F259IIMgj2pfN09?p=preview

I really want to add Google Earth to Google Maps like the one in here: http://maps.google.com Is it possible with v3?

Answer 1

Yes - it is possible to integrate the Earth Api with the Maps v3 API - here is a working example.

The problem with your code is the line var ge = new GoogleEarth(map); - you are making this call before the Earth api has finished loading via the asynchronous call to google.load("earth", "1");

This means that google.earth is null when you try and use it and so the Uncaught google.earth not loaded error is thrown.

To fix it you should only call new GoogleEarth(map) once the API has finished loading. The easiest way to do this is probably to use a callback.

For example - you could amend your script.js as follows.

(function(window, google, mapster) {

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

  // map options
  var options = mapster.MAP_OPTIONS,
      element = document.getElementById('map-canvas'),
      map = mapster.create(element, options);

  // callback method to fire once the api had loaded
  google.maps.event.addDomListener(window, 'load', function() {  new GoogleEarth(map) });

  var marker2 = map.addMarker({
    lat: 37.781350,
    lng: -122.485883,
    draggable: true,
    events: [{
      name: 'click',
      callback: function(e, marker) {
        console.log(e, marker);
      }
    }, {
      name: 'dragend',
      callback: function() {
        alert('dragged');
      }
    }]
  }); 

  // no point calling this here as google.earth will be null
  //var ge = new GoogleEarth(map); 

}(window, google, window.Mapster));