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>";