Tips for working with Google Earth

As part of an exciting upcoming project here at Wiliam, we have been tasked to include Google Earth integration. Google Maps has had much integration on websites but I have not seen that many practical uses for Google Earth. The most exciting part of Google Earth is its ability to utilise 3D models from Google Sketchup and place them on the map.

Whilst researching the implementation of the Earth JavaScript API, I was finding it difficult to work out how to do a few basic things with the 3D models.

Use Collada models from Sketchup

You can download models from the 3D Warehouse or create your own using Sketchup and exporting to the Collada .dae format. It is a simple matter of downloading the Collada format model and unzipping the folder structure onto your website. Each .zip contains an images folder, models folder, doc.kml and textures.txt. In the models folder the .dae file can be found, which is the key file to be referenced by the Earth API. 

Assuming you have set up the basics, you can add a model to the page like so:

      var myModel = ge.createPlacemark('myModel');
      myModel.setName('model');
                   
      var model = ge.createModel('');
      ge.getFeatures().appendChild(myModel);

      var loc = ge.createLocation('');
      model.setLocation(loc);
                   
      var link = ge.createLink('');
      link.setHref('http://earth-api-samples.googlecode.com/svn/trunk/examples/static/splotchy_box.dae');
      model.setLink(link);

      var la = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
      loc.setLatitude(37);
      loc.setLongitude(-122);
      loc.setRange(300);
      loc.setTilt(45);

      myModel.setGeometry(model); 

This will load a cow-themed cube onto your map. But what can you do with it? You can increase and decrease the size of the model like so:

      scale = model.getScale();
      scale.setX(mySize);
      scale.setY(mySize);
      scale.setZ(mySize);
      model.setScale(scale)

If you default the mySize variable to 1 then you can increase and decrease the size of the model by altering its value; try 0.5 steps first.

You can also rotate the model across the three axis:

      orient.setTilt(myTilt);
      orient.setRoll(myRoll);
      orient.setHeading(myHeading);
      model.setOrientation(orient);
      myModel.setGeometry(model);

The tilt, roll and heading values are in degrees. Presuming your defaults for  myTilt, myRoll and  myHeading are 0 then increasing or decreasing any of these values will change the models rotation across the three axis and 360 degrees.

As I learn more on this topic I will post more tips on using your models with the Google Earth API.