Suppress fusion table infowindow with multiple lay

Question

I have a map with two fusion tables layers and am using suppressInfoWindows so that an infowindow from one layer is not left open when a user clicks on a marker from the other layer. This works fine using the below code:

<script type="text/javascript">
var map;
var infowindow;

var layer;
var tableid = MY FUSION TABLE ID;

var layer2;
var tableid2 = MY FUSION TABLE ID;

function initialize() {

  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(10, 30),
    zoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

 infoWindow = new google.maps.InfoWindow();

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

 layer = new google.maps.FusionTablesLayer(tableid, {suppressInfoWindows:true});
 layer.setQuery("SELECT 'Country Geometry' FROM " + tableid);
 layer.setMap(map);
 google.maps.event.addListener(layer, "click", openIW);

 layer2 = new google.maps.FusionTablesLayer(tableid2, {suppressInfoWindows:true});
 layer2.setQuery("SELECT 'Site Location' FROM " + tableid2);
 layer2.setMap(map);
 google.maps.event.addListener(layer2, "click", openIW);

}

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);
}

</script>

How can I now add custom html to the infowindow rather than rely on the infowindow settings from Fusion Tables? The code I was using before adding the suppressInfoWindows option was as follows, but I'm not sure how to now add this back in, in the right format. Also, is it possible to use different html code for the infowindows on different layers, or must both layers use the same infowindow? Thanks.

e.infoWindowHtml =  "<div id='SiteInfo' class='googft-info-window' style='font-family: sans-serif; width: 500px; height: 300px; overflow: auto;'>\
            <b>" + e.row['Site Name'].value + "</b><br />\
            </div></div>";

Answer 1

See my example in my answer to your last question on this.

Example of your map with 2 layers, 1 infowindow

To implement:

1. Suppress the infowindows on both layers
2. Write code to open a shared infowindow when either layer is clicked.