how to integrate a pair of fusion tables with GroundOverlays from a KML file? Updated with my attempt to solve (unsuccessful)

Question

Short version of my question:
How do I integrate a pair of Google Maps fusion tables (polygons and markers) with GroundOverlays from a KML file? Everything clickable.

Background: I am working on an interactive history mapping project that uses 2 layers of fusion tables (one layer is polygons, the other is location markers).

I also want to overlay old maps via GroundOverlay -- which is not presently possible with fusion tables -- and so I have been experimenting with GroundOverlay in a KML file.

I've complicated it by adding listeners on both the pages to control click boxes.

I have two webpages:
1. the fusion tables and
2. the KML groundoverlays,
both working fine.

What I want to do is integrate them into a single page. I am not a programmer and don't understand JS well enough to make this happen.

The scripting used was all adapted from examples found online.

Here is my first working page:
http://wendysmithtoronto.com/mapping/townofyork-fusiontables2.html

You'll find a link to the second page there.

Your help would be greatly appreciated. Thank you. Wendy

---

Update:

Here's my effort to merge my two sets of data:

http://wendysmithtoronto.com/mapping/townofyork-merged.html

I tried to do this by adding bits of script from the kmlmaps page into the fusiontables page, but clearly I didn't put things in the right place. Or am missing bits of punctuation (or mixing up different types of scripting, or?)

The map appears, with the polygons and the markers both properly appearing. But now (1) the fusion table icons aren't clickable, and (2) the history maps don't appear. However, the fusion table checkboxes (in blue table) DO work.

I don't understand JS well enough to figure it out.

The two sets of controls from the two pages are both here (in the blue and grey boxes, just above the map). Each set of controls (listeners & click boxes) worked fine in its own wepage but now only the fusion tables controls work.

Eric, thanks for having a look at this! (I just now found your reply. I've been watching for a reply notification but wasn't checking the right place.)

Cheers, Wendy

Answer 1

Your html file had significant errors in the javascript portions. You really should study up on same basic javascript and in particular using JS with the GMap API.

You created 2 global map objects. You did not encapsulate all your map and layer creations within you initialize function(). All map and layer creation must be done within the initialize (on body load) function. You must set globals outside your initialize function, e.g. the map, all the layers, etc. Finally you were failing to call layer.setMap(map) on 2 of your KML layers.

Despite all this I fixed your file, really just re-arranging things. This is just the section I had to fix. Moved everything into the initialize()

     function showbuildings(buildingcheck) {
    if (buildingcheck.checked == true)
      {
        campusmap.setMap(map);
      } else {
        campusmap.setMap(null);
      }
  }


  function showphilpotts(philpottscheck) {
    if (philpottscheck.checked == true)
      {
        philpotts.setMap(map);        
      } else {
        philpotts.setMap(null);
      }
  }



  function showbeartrail(beartrailcheck) {
    if (beartrailcheck.checked == true)
      {
        beartrail.setMap(map);        
      } else {
        beartrail.setMap(null);
      }
  }


var infoWindow = new google.maps.InfoWindow();

function openIW(FTevent) {
  // infoWindow.setContent(FTevent.infoWindowHtml);
  // infoWindow.setPosition(FTevent.latLng);
  infoWindow.setOptions(
    { 
     content: FTevent.infoWindowHtml,
     position: FTevent.latLng,
     pixelOffset: FTevent.pixelOffset
    });
  infoWindow.open(map);
}

// Globals
//Begin map parameters
var map;
var layer_2;
var layer_1;
var tableid_1 = 2920040;  // polygons
var tableid_2 = 3189980;  // houses
var zoom = 12;
var center = new google.maps.LatLng(43.652417455515476, -79.37926607055226);

var campusmap;
var philpotts;
var beartrail;

function initialize() {

  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: center,
    zoom: zoom,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
   //End map parameters

    campusmap = new google.maps.KmlLayer('http://wendysmithtoronto.com/mapping/1851mapshoreline.kml',  {preserveViewport:true, suppressInfoWindows:true});
    campusmap.setMap(map);

    google.maps.event.addListener(campusmap, 'click', function(kmlEvent) {
      document.getElementById('sidebarinfo').innerHTML = kmlEvent.featureData.description;
    });         

   philpotts = new google.maps.KmlLayer('http://wendysmithtoronto.com/mapping/1818maplieutphilpottsd.kml', {preserveViewport:true, suppressInfoWindows:true}); 
  google.maps.event.addListener(philpotts, 'click', function(kmlEvent) {
    document.getElementById('sidebarinfo').innerHTML = kmlEvent.featureData.description;
   });    
    philpotts.setMap(map);

    beartrail = new google.maps.KmlLayer('http://wendysmithtoronto.com/mapping/1842map-jamescaneb.kml', {preserveViewport:true, suppressInfoWindows:true}); 
  google.maps.event.addListener(beartrail, 'click', function(kmlEvent) {
    document.getElementById('sidebarinfo').innerHTML = kmlEvent.featureData.description;
  }); 
   beartrail.setMap(map);

layer_2 = new google.maps.FusionTablesLayer({
  suppressInfoWindows:true,
  query: {
    select: 'Location',
    from: '3189980'
  },
styles: [
  {where: "'style' = 14", markerOptions:{ iconName:"star"}},
  {where: "'style' = 13", markerOptions:{ iconName:"wht_pushpin"}},
  {where: "'style' = 11", markerOptions:{iconName:"red_blank"}}, //town houses
  {where: "'style' = 12", markerOptions:{ iconName:"orange_blank"}}, //country homes


  {where: "'style' = 15", markerOptions:{ iconName:"target"}},
  ]});
layer_1 = new google.maps.FusionTablesLayer({
  suppressInfoWindows:true,
  query: {
    select: 'Location',
    from: '2920040'
  }}),

 google.maps.event.addListener(layer_1, "click", openIW);
 google.maps.event.addListener(layer_2, "click", openIW);
 google.maps.event.addListener(map, "click", function() { infoWindow.close();});

layer_1.setMap(map);
layer_2.setMap(map);

} // end initialize