Click events in Google Earth

javaScript: Click events in  google Earth  get it now

This relates to Data Driven Mapping applications and the javaScript 'howTo' section.

Events in Google Earth

I deal with event handling in Google earth in Using Google Earth but dealing with click and double click events is especially tricky, made even more so by cross browser issues. 

Knowing the difference between click and double click

If you try to handle the double click, firstly you lose the useful double click behavior native to Earth, but also the first click of a double click fires off a single click. In the case oft his application, single click means bring up an info Balloon, and double click is to mean go to the next spot, so I had to find a way of handling double click. 

Here's the code below
 mcpherSpot.prototype.dealWithClicks = function(showit) { 
  var spot=this;
  var vm = this.parent;
  var doubleClickTimeout = 300;

  // now see if its the second click within the timeout period
  if (!vm.dealingWithClicks){ 
   vm.dealingWithClicks = true;
   // this is single click behavior
   setTimeout( function() 
     { if(vm.dealingWithClicks) {
      vm.dealingWithClicks = false;
      spot.createInfoWindow  (0); }}
   , doubleClickTimeout);
  }
  else { 
   // double click behavior
   vm.dealingWithClicks = false;
   vm.gotoAnotherSpot(spot,vm.nextSpot(spot));
   if(showit)vm.nextSpot.createInfoWindow(0);
  }

  return(false);
 };

 function mcpherClicks(e,spot,plot){
  
  if(e.preventDefault)e.preventDefault();
  if(e.stopPropagation)e.stopPropagation();
  if (spot.flying){
   var ge = spot.parent.ve.ge;
   spot.stopFlyAround();
   google.earth.addEventListener(ge.getView(), 
     'viewchangeend', mcpherFlyingClicks(spot,plot));
  }
  else {
   spot.dealWithClicks(plot);
  }
 }


Walkthrough

   google.earth.addEventListener(spot.placemark, 'click', 
     function(e)  { mcpherClicks(e,spot,false); } );

The trick here is to only handle single clicks, but if a single click happens within a short time (in this case var doubleClickTimeout = 300;) then process as a double click. 

This is achieved by setting a timeout that calls a function spot.createInfoWindow to deal with a single click if a second single click didn't happen within the timeout period. If it did happen, then it's a double click.
if (!vm.dealingWithClicks){ 
   vm.dealingWithClicks = true;
   // this is single click behavior
   setTimeout( function() 
     { if(vm.dealingWithClicks) {
      vm.dealingWithClicks = false;
      spot.createInfoWindow  (0); }}
   , doubleClickTimeout);
  }
  else { 
   // double click behavior
   vm.dealingWithClicks = false;
   vm.gotoAnotherSpot(spot,vm.nextSpot(spot));
   if(showit)vm.nextSpot.createInfoWindow(0);
  }

Dealing with multiple browsers

  if(e.preventDefault)e.preventDefault();
  if(e.stopPropagation)e.stopPropagation();


Comments