Google Earth Plugin Context Menu

Question

I've been using the Google Earth plugin to build specific functionality and one of the things I'd like to do is create my own context menu over GE.

Has anyone done this? Any help is greatly appreciated.

Answer 1

Currently, you need to use IFRAME SHIMS. Hopefully that will change one day.

Check out this page for an example http://earth-api-samples.googlecode.com/svn/trunk/demos/customcontrols/index.html

and check out this other question on SO for some more info How can I place a html div over the Google Earth plugin? Involves wmode, I imagine

If you are interested, you can see my webpage which uses iframe shims over google earth here http://www.3dwhistler.com/

Answer 2

You could achieve this by listening for mouseup or click event and then using a shim overlay technique to display a custom context menu.

The code for the event listener would be something like the following.

// Listen for all mouseup events in the plugin.
// Where 'ge' is an instance of the GEPlugin
google.earth.addEventListener(ge.getWindow(), 'mouseup', eventHandler);

The event handler would be something like the following.

// Handles mouseup events (e is a KmlMouseEvent)
var eventHandler = function(e)
{
  // if it is a right-click 
  if (e && e.getButton() == 2)
  {
    event.preventDefault(); // optional, depending on your requirements
    event.stopPropagation(); // optional, depending on your requirements
    openMenu(e.getScreenX(), e.getScreenY());
  }
}

Finally, the code for opening the custom menu would be something like the following.

// Insert a custom iframe at the x, y screen position 
var openMenu = function(x, y)
{
  var iframe = document.createElement('iframe');
  iframe.frameBorder = 0;
  iframe.scrolling = 'no';
  iframe.style.position = 'absolute';

  // build the menu as you require...
  // then position and show it.
  iframe.style.left = x + 'px'; 
  iframe.style.top = y + 'px'; // you may want to offset the position...

  document.body.appendChild(iframe ); // show the menu
}

Obviously what you put in the menu and how you style it is up to you. You would also probably want to hide it too, this would just be a case of removing the iframe - probably in another listener on the menu items (e.g. when you click a menu item the menu disappears)

If you get stuck here is a great reference for working with events. https://developers.google.com/earth/documentation/events

Also, here is a working example of the iframe shim technique: http://earth-api-samples.googlecode.com/svn/trunk/demos/customcontrols/index.html