Andrew Trice

Tuesday June 03, 2008

Google Earth + Flex Source Code

A ton of people have been asking about the source code for my previous blog post on Flex + the Google Earth API, so here it is... First, let's look at the example again...

This example requires the Google Earth plugin, and only works in browsers that are supported by Google Earth (IE + Firefox on Windows only).


You can type in a location, and it will go there. You can also toggle the nav controls, and the grid overlay.

This example requires the Google Earth plugin, and only works in browsers that are supported by Google Earth (IE + Firefox on Windows only).

Now, here's how it works...
It uses the same old trick for layering Google Maps HTML/JavaScript over Flex content. It displays the google earth container in a HTML DIV that sits "on top" of the Flex application. There is a Flex component that is a placeholder for where the Google Earth container should be displayed. Whenever that Flex component is resized or moved, the position of the DIV containing the Google Earth plugin is updated using javascript.

All communication between the Flex application and the Google Earth Plugin is done using ExternalInterface and JavaScript. In FireFox, there are a few clipping issues when you resize the application larger, but it seems to work properly in IE.

You can view the source code at:
http://www.cynergysystems.com/blogs/blogs/andrew.trice/googleearth/srcview/

You can download the source code at:
http://www.cynergysystems.com/blogs/blogs/andrew.trice/googleearth/srcview/Google Earth API.zip

You will need to update the google maps api key in index.template.html.

You can launch the application in a new window at:
http://www.cynergysystems.com/blogs/blogs/andrew.trice/googleearth/main.html

You can get more information about the Google APIs here:
Google Earth API
Google Earth API Examples
Google Maps API
Google Earth Blog