Hover on FusionTablesLayer in google maps

Question

I have a FusionTablesLayer on my google map and it works great, but now I have to add a hover to it and I can figure out if it's possible. I've seen examples with a hover on different polygons, but I can't use this.

My layer:

layer = new google.maps.FusionTablesLayer({
    map: map,
    suppressInfoWindows: true,
    heatmap: { enabled: false },
    query: {
        select: "col0",
        from: key,
        where: CreateQuery(shownMunicipalities)
    },
    styles: [{
        polygonOptions: {
            fillColor: '#eeeeee',
            fillOpacity: 0.5,
            strokeColor: '#000000',
            strokeOpacity: 0.2,
            strokeWeight: 2
        }
    }, {
        where: CreateQuery(activeMunicipalities),
        polygonOptions: {
            fillColor: '#00FF00',
            fillOpacity: 0.3
        }
    }],
    options: {
        styleId: 2,
        templateId: 2
    }
});

I've tried add a listener of the mouseover event, but this doesn't seem to do anythin.

google.maps.event.addListener(layer, 'mouseover', function (event) {
    alert('hover');
});

Am I trying to do the impossible?

Answer 1

FusionTablesLayers don't support mouseover events, only click events. (see this enhancement request)

There are implementations that add mouseover support (fusiontips) and this example from the FusionTables documentation.

code snippet (example from documentation):

      var colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00'];
      var map;

      function initialize() {
        var myOptions = {
          zoom: 2,
          center: new google.maps.LatLng(10, 0),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById('map-canvas'),
          myOptions);

        // Initialize JSONP request
        var script = document.createElement('script');
        var url = ['https://www.googleapis.com/fusiontables/v1/query?'];
        url.push('sql=');
        var query = 'SELECT name, kml_4326 FROM ' +
          '1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ';
        var encodedQuery = encodeURIComponent(query);
        url.push(encodedQuery);
        url.push('&callback=drawMap');
        url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ');
        script.src = url.join('');
        var body = document.getElementsByTagName('body')[0];
        body.appendChild(script);
      }

      function drawMap(data) {
        var rows = data['rows'];
        for (var i in rows) {
          if (rows[i][0] != 'Antarctica') {
            var newCoordinates = [];
            var geometries = rows[i][1]['geometries'];
            if (geometries) {
              for (var j in geometries) {
                newCoordinates.push(constructNewCoordinates(geometries[j]));
              }
            } else {
              newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);
            }
            var randomnumber = Math.floor(Math.random() * 4);
            var country = new google.maps.Polygon({
              paths: newCoordinates,
              strokeColor: colors[randomnumber],
              strokeOpacity: 0,
              strokeWeight: 1,
              fillColor: colors[randomnumber],
              fillOpacity: 0.3
            });
            google.maps.event.addListener(country, 'mouseover', function() {
              this.setOptions({
                fillOpacity: 1
              });
            });
            google.maps.event.addListener(country, 'mouseout', function() {
              this.setOptions({
                fillOpacity: 0.3
              });
            });

            country.setMap(map);
          }
        }
      }

      function constructNewCoordinates(polygon) {
        var newCoordinates = [];
        var coordinates = polygon['coordinates'][0];
        for (var i in coordinates) {
          newCoordinates.push(
            new google.maps.LatLng(coordinates[i][1], coordinates[i][0]));
        }
        return newCoordinates;
      }

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

#map-canvas {
  height: 500px;
  width: 600px;
}

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