KML infowindows glitch when combined w Fusion Tables layers in a Google Map

Question

I have a glitch with my interactive mapping project that I've been unable to resolve.

The map has several layers, a couple using data from KML files and the others using Fusion Tables files.

The problem is that the infowindows launched by the KML layers don't operate correctly. Clicking an item on the map from a KML layer actually seems to launch two windows -- (1) an infowindow and (2) a little stub window at the bottom, with an X that can be clicked to close it.

MY GOALS:

-- to have both the KML and Fusion Table layers launch proper infowindows with information when items are clicked;

-- to have each new click close the infowindow already on the screen, and open an infowindow with the new information.

I did some research and testing and came up with these four test pages, which illustrate different facets of the problem:

ONE. http://wendysmithtoronto.com/parklotproject/test-suppressinfowindows.html

-- 2 fusion tables

-- works fine

TWO. http://wendysmithtoronto.com/parklotproject/test-kml-clickable.html

-- 1 kml file, works perfectly -- also 1 fusion table, but the content (park lot rectangles) doesn't appear on the map. (I started with a different sample and couldn't figure out how to integrate the fusion layer).

THREE. http://wendysmithtoronto.com/parklotproject/test-suppressinfowindows-4.html

-- with 1 fusion table layer (the parklots - coloured rectangles) and 1 kml layer (waterways, the island, the pigeon icons)

-- I applied suppressInfoWindows: true to the KML layer --> result is that when I click a marker from that layer, the map only displays a tiny stub popupwith an arrow at the bottom -- no info displayed. But it does operate like a proper infowindow, with click closing the previous window.

FOUR. http://wendysmithtoronto.com/parklotproject/test-suppressinfowindows-false-5.html

-- same as the previous file, except that the KML layer is set to suppressInfoWindows: false

----> this last one demonstrates the entire problem (and the way my project is presently functioning):

1. click on something from the kml file (waterways, the island, the pigeon icons) -- that little stub still appears (at the bottom) but now the info window pops up as well.

2. click on something from the fusion table layer (the parklots - coloured rectangles) and the KML infowindow remains on the map -- that means two info windows open. (Although clicking on a marker from the fusion table layer DOES close the KML's little stub window.)

3. but then click on something from the KML layer and it closes the window launched by the fusion table layer.

I believe you can VIEW PAGE SOURCE on each of these test pages, so I am not including the coding here.

Here is the link for actual project: http://parklotproject.com

BTW I started putting this together a couple of years ago and must thank the stackoverflow volunteers who helped me with some programming challenges then (especially Eric Bridger).

Thanking you in advance for any help with this problem.

Answer 1

For FusionTables click events, the .infoWindowHtml is a property of the event. For KmlLayer, the .infoWindowHtml is in the .featureData property of the event.

So for KmlLayer click events, you need to use:

e.featureData.infoWindowHtml

For FusionTables click events, you need to use:

e.infoWindowHtml

Change suppressInfoWindows:true for all the layers. Change the click event handler to figure out which layer was clicked by looking for a .featureData property.

  // Open the info window at the clicked location
  function windowControl(e, infoWindow, map) {
    var infoWindowHtml;
    if (e.featureData) {
      infoWindowHtml = e.featureData.infoWindowHtml;
    } else {
      infoWindowHtml = e.infoWindowHtml;
    }
    infoWindow.setOptions({
      content: infoWindowHtml,
      position: e.latLng,
      pixelOffset: e.pixelOffset
    });
    infoWindow.open(map);
  }

code snippet:

function initialize() {
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(43.63889993, -79.40481525),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: true,
    mapTypeControlOptions: {},
    panControl: true,
    panControlOptions: {
      position: google.maps.ControlPosition.RIGHT_CENTER
    },
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.LARGE,
      position: google.maps.ControlPosition.RIGHT_CENTER
    },
    scaleControl: true,
    scaleControlOptions: {
      position: google.maps.ControlPosition.BOTTOM_CENTER
    }
  });

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

  var waterwaysLayer = new google.maps.KmlLayer({
    url: 'http://wendysmithtoronto.com/parklotproject/waterways92_parklotproject.kml',
    preserveViewport: true,
    suppressInfoWindows: true
  });
  google.maps.event.addListener(waterwaysLayer, 'click', function(e) {
    windowControl(e, infoWindow, map);
  });

  waterwaysLayer.setMap(map);

  // Initialize the second layer
  var secondLayer = new google.maps.FusionTablesLayer({
    query: {
      select: "'Location'",
      from: '1bBnWdcpcvtuFj3svjGe1dRa3BwgDzx_Qj9n_ZE0'
    },
    map: map,
    suppressInfoWindows: true
  });
  google.maps.event.addListener(secondLayer, 'click', function(e) {
    windowControl(e, infoWindow, map);
  });
}

// Open the info window at the clicked location
function windowControl(e, infoWindow, map) {
  var infoWindowHtml;
  if (e.featureData) {
    infoWindowHtml = e.featureData.infoWindowHtml;
  } else {
    infoWindowHtml = e.infoWindowHtml;
  }
  infoWindow.setOptions({
    content: infoWindowHtml,
    position: e.latLng,
    pixelOffset: e.pixelOffset
  });
  infoWindow.open(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

body {
  font-family: Arial, sans-serif;
  font-size: 12px;
}
#map-canvas {
  height: 900px;
  width: 900px;
}
#visualization {
  height: 700px;
  width: 200px;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>