Search code examples
javascriptgoogle-maps-api-3google-fusion-tables

Multilayer google fusion table enable MapTips

I have been working on the code below for some time and cannot manage to get MapTips working for the markers when the mouse hovers over them.

<html>
<head>
<style>
  #map_canvas { width: 500px; height: 400px; }
</style>
<link href="../stylesheet.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://gmaps-utility-gis.googlecode.com/svn/trunk/fusiontips/src/fusiontips_compiled.js"></script>
<script type="text/javascript">
var map;

var layer;
var tableid = 5463275;

var layer2;
var tableid2 = 5492676;

function initialize() {
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(51.500000, -0.090000),
    zoom: 9,
    mapTypeControl: false,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  layer = new google.maps.FusionTablesLayer(tableid, {
  suppressInfoWindows: true
});
  layer.setQuery("SELECT 'geometry' FROM " + tableid);
  layer.setMap(map);

  layer2 = new google.maps.FusionTablesLayer(tableid2);
  layer2.setQuery("SELECT 'Full Address' FROM " + tableid2);
  layer2.setMap(map);
  layer2.enableMapTips({
                select: "'Site Name'",
                from: tableid, 
                geometryColumn: 'Full Address', 
                suppressMapTips: false, 
                delay: 100, 
                tolerance: 6 });

  var legendDiv = document.createElement('DIV');
  var legend = new Legend(legendDiv, map);
  legendDiv.index = 1;
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legendDiv);
}


</script>

</head>
<body onLoad="initialize();">

<div id="map_canvas"></div>
</body>
</html>​

The map is made up of two fusion tables layers - I have linked to the table containing data for the markers below:

Fusion Table for Markers

Any help would be greatly appreciated!

Solution

  • You missed the quotes around the 'Full Address', and therefore the query was not correctly encoded and threw an error. I put a a working example on jsFiddle.

    Here is the corrected part:

    layer2.enableMapTips({
    select: "'Site Name'",
    from: tableid, 
    geometryColumn: "'Full Address'", 
    suppressMapTips: false, 
    delay: 100, 
    tolerance: 6 
});

    First, I tried to update your code to use encrypted table ids, but it seems this is not yet supported by the FusionTips script.