Fusion Tables fusiontips mouseover event not working - mouseover

Question

I created a map using Fusion Tables today, and I'm about 90% of where I need to be, but I'm totally stuck on enabling the mouseover event on my map. Basically I want the county name to appear as one hovers over the map. I've taken the sample code from here:
http://gmaps-utility-gis.googlecode.com/svn/trunk/fusiontips/docs/examples.html
I think I've filled in the required info correctly. I generated the HTML/JS map automatically from Fusion Tables. Here's my live map: http://www.casalett.net/map/map.html
Any and all help would be appreciated!
Here's the code:
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&v=3"></script>
<script src="js/fusiontipsV1.js" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
google.maps.visualRefresh = true;
var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) ||
(navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
if (isMobile) {
var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no');
}
var mapDiv = document.getElementById('googft-mapCanvas');
//mapDiv.style.width = isMobile ? '100%' : '1000px';
//mapDiv.style.height = isMobile ? '100%' : '400px';
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(35.196111, -79.464167),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open'));
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));
layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "col4\x3e\x3e0",
from: "1ohK_Kmh7JbNZH1nC7NM-1MjhVf8OBzCJrxmbC0tq",
where: ""
},
options: {
styleId: 2,
templateId: 2
}
});
// This is the only section I added myself from the example page
layer.enableMapTips({
select: "'County Name'", // list of columns to query, typially need only one column.
from: "1ohK_Kmh7JbNZH1nC7NM-1MjhVf8OBzCJrxmbC0tq", // fusion table name
geometryColumn: 'gemoetry', // geometry column name
suppressMapTips: false, // optional, whether to show map tips. default false
delay: 200, // milliseconds mouse pause before send a server query. default 300.
tolerance: 8 // tolerance in pixel around mouse. default is 6.
});
//listen to events if desired.
google.maps.event.addListener(layer, 'mouseover', function(fEvent) {
var row = fEvent.row;
myHtml = 'mouseover:<br/>';
for (var x in row) {
if (row.hasOwnProperty(x)) {
myHtml += '<b>' + x + "</b>:" + row[x].value + "<br/>";
}
}
document.getElementById('info').innerHTML = myHtml;
});
google.maps.event.addListener(layer, 'mouseout', function(fevt) {
document.getElementById('info').innerHTML = '';
});
// Section I added myself ends here
if (isMobile) {
var legend = document.getElementById('googft-legend');
var legendOpenButton = document.getElementById('googft-legend-open');
var legendCloseButton = document.getElementById('googft-legend-close');
legend.style.display = 'none';
legendOpenButton.style.display = 'block';
legendCloseButton.style.display = 'block';
legendOpenButton.onclick = function() {
legend.style.display = 'block';
legendOpenButton.style.display = 'none';
}
legendCloseButton.onclick = function() {
legend.style.display = 'none';
legendOpenButton.style.display = 'block';
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

You need to include your apiConsoleKey valid for the domain your page is on, like the example at:
http://gmaps-utility-gis.googlecode.com/svn/trunk/fusiontips/examples/fusiontips.html
// authentication required, either API key or OAuth 2.0 token
// replace with a key valid for your domain
var apiConsoleKey = "AIzaSyA47jXARydzK61yX18t4oPpy6xUZDBukiY"; // valid for this question on stackoverflow.com, http://stac
// var apiConsoleKey = "AIzaSyAfravxKsLG5RItI93Dyh3Nya8Dg7vfYsk"; // valid for gmaps-utility-gis.googlecode.com domain only.
// var apiConsoleKey = "AIzaSyCxitB5jQcw7weQdg9MqBRfxr6mj81wT7I"; // valid for geocodezip.com
var map, layer;
function loadPoint() {
if (layer != null) {
layer.setMap(null);
google.maps.event.clearInstanceListeners(layer);
}
// original numeric ID 297050; Fusion Tables API v1.0 requires encrypted IDs.
var tableid = '15UY2pgiz8sRkq37p2TaJd64U7M_2HDVqHT3Quw';
layer = new google.maps.FusionTablesLayer({
query: {
select: 'Address',
from: tableid
},
map: map
});
layer.enableMapTips({
// authentication required, either API key or OAuth 2.0 token
key: apiConsoleKey, // replace with a key valid for your domain.
select: "'Store Name','Address'", // list of columns to query, typially need only one column.
from: tableid, // fusion table name
geometryColumn: 'Address', // geometry column name
suppressMapTips: false, // optional, whether to show map tips. default false
delay: 200, // milliseconds mouse pause before send a server query. default 300.
tolerance: 8 // tolerance in pixel around mouse. default is 6.
});
map.setCenter(new google.maps.LatLng(37.4, -122.1));
map.setZoom(10);
addListeners();
google.maps.event.addListener(layer, 'click', function(me) {
me.infoWindowHtml = me.infoWindowHtml + "<a href='javascript:void'>Test</a>";
});
}
function loadLine() {
if (layer != null) {
layer.setMap(null);
google.maps.event.clearInstanceListeners(layer);
}
// original numeric ID 296374; Fusion Tables API v1.0 requires encrypted IDs.
var tableid = '1xo_sVz4108NNejzUCGp_2nJIoOltKi467LYbHg';
layer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: tableid
},
map: map
});
layer.enableMapTips({
// authentication required, either API key or OAuth 2.0 token
key: apiConsoleKey, // replace with a key valid for your domain.
select: "description", // list of columns to query, typially need only one column.
from: tableid, // fusion table name
geometryColumn: 'geometry', // geometry column name
suppressMapTips: false, // optional, whether to show map tips. default false
delay: 200, // milliseconds mouse pause before send a server query. default 300.
tolerance: 4 // tolerance in pixel around mouse. default is 6.
});
map.setCenter(new google.maps.LatLng(50.46, -104.6));
map.setZoom(12);
addListeners();
}
function loadPoly() {
if (layer != null) {
layer.setMap(null);
google.maps.event.clearInstanceListeners(layer);
}
// original numeric ID 1670859; Fusion Tables API v1.0 requires encrypted IDs.
var tableid = '18Vjqv451aikVXxlnGKhVEIJ0y4l18ZQ86eReE68';
layer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry_simplified',
from: tableid
},
map: map
});
layer.enableMapTips({
// authentication required, either API key or OAuth 2.0 token
key: apiConsoleKey, // replace with a key valid for your domain.
select: "'NAME'", // list of columns to query, typially need only one column.
from: tableid, // fusion table name
geometryColumn: 'geometry_simplified', // geometry column name
suppressMapTips: false, // optional, whether to show map tips. default false
delay: 100, // milliseconds mouse pause before send a server query. default 300.
tolerance: 1 // tolerance in pixel around mouse. default is 6.
});
map.setCenter(new google.maps.LatLng(38.3, -95.4));
map.setZoom(4);
addListeners();
}
function addListeners() {
google.maps.event.addListener(layer, 'mouseover', function(fEvent) {
var row = fEvent.row;
myHtml = 'mouseover:<br/>';
for (var x in row) {
if (row.hasOwnProperty(x)) {
myHtml += '<b>' + x + "</b>:" + row[x].value + "<br/>";
}
}
document.getElementById('info').innerHTML = myHtml;
});
google.maps.event.addListener(layer, 'mouseout', function(fevt) {
document.getElementById('info').innerHTML = '';
});
}
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(37.4, -122.1),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
loadPoly();
}
google.maps.event.addDomListener(window, 'load', initialize);
body {
font-family: Arial, sans-serif;
}
body,
html {
width: 100%;
}
#map_canvas {
height: 500px;
width: 100%;
}
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://gmaps-utility-gis.googlecode.com/svn/trunk/fusiontips/src/fusiontips.js"></script>
<div>
Move mouse over a fusion table feature and pause a while (configurable, default < 0.5 sec), a map tip will display. (documentation)
</div>
<div id='map_canvas'>
</div>
<div id='info'>
</div>
A code snippet using your table and my key:
function initialize() {
google.maps.visualRefresh = true;
var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) ||
(navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
if (isMobile) {
var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no');
}
var mapDiv = document.getElementById('googft-mapCanvas');
//mapDiv.style.width = isMobile ? '100%' : '1000px';
//mapDiv.style.height = isMobile ? '100%' : '400px';
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(35.196111, -79.464167),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open'));
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));
layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: {
enabled: false
},
query: {
select: "col4\x3e\x3e0",
from: "1ohK_Kmh7JbNZH1nC7NM-1MjhVf8OBzCJrxmbC0tq",
where: ""
},
options: {
styleId: 2,
templateId: 2
}
});
var apiConsoleKey = "AIzaSyA47jXARydzK61yX18t4oPpy6xUZDBukiY"; // valid for this question on stackoverflow.com, http://stacksnippets.net
layer.enableMapTips({
// authentication required, either API key or OAuth 2.0 token
key: apiConsoleKey, // replace with a key valid for your domain.
select: "'County Name'", // list of columns to query, typially need only one column.
from: "1ohK_Kmh7JbNZH1nC7NM-1MjhVf8OBzCJrxmbC0tq", // fusion table name
geometryColumn: 'gemoetry', // geometry column name
suppressMapTips: false, // optional, whether to show map tips. default false
delay: 200, // milliseconds mouse pause before send a server query. default 300.
tolerance: 8 // tolerance in pixel around mouse. default is 6.
});
//listen to events if desired.
google.maps.event.addListener(layer, 'mouseover', function(fEvent) {
var row = fEvent.row;
myHtml = 'mouseover:<br/>';
for (var x in row) {
if (row.hasOwnProperty(x)) {
myHtml += '<b>' + x + "</b>:" + row[x].value + "<br/>";
}
}
document.getElementById('info').innerHTML = myHtml;
});
google.maps.event.addListener(layer, 'mouseout', function(fevt) {
document.getElementById('info').innerHTML = '';
});
if (isMobile) {
var legend = document.getElementById('googft-legend');
var legendOpenButton = document.getElementById('googft-legend-open');
var legendCloseButton = document.getElementById('googft-legend-close');
legend.style.display = 'none';
legendOpenButton.style.display = 'block';
legendCloseButton.style.display = 'block';
legendOpenButton.onclick = function() {
legend.style.display = 'block';
legendOpenButton.style.display = 'none';
}
legendCloseButton.onclick = function() {
legend.style.display = 'none';
legendOpenButton.style.display = 'block';
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body {
margin: 0;
padding: 0;
font-family: Verdana, Geneva, sans-serif;
font-size: 18px;
}
#googft-mapCanvas {
min-height: 700px;
margin: 0 auto;
padding: 0;
width: 100%;
}
#media screen and (max-width: 780px) {
#googft-mapCanvas {
min-height: 400px;
}
}
#media screen and (max-width: 480px) {
#googft-mapCanvas {
min-height: 400px;
}
}
<script src="https://maps.google.com/maps/api/js?sensor=false&v=3"></script>
<script src="http://gmaps-utility-gis.googlecode.com/svn/trunk/fusiontips/src/fusiontips.js"></script>
<h1 style="text-align: center;">Counties in NC</h1>
<div id="googft-mapCanvas"></div>
<div style="width: 700px; margin: 100px auto;">
<section id="anchor-1">
<h3>Alamance County</h3>
<p><strong>Really good quote</strong>
</p>
<p>The default automatic template shows the data from the first 10 columns. Check or uncheck the box next to the column name to include it in the automatic info window.Any format applied to the data in the column will show here. For example, if a column
contains URLs to images and the format "Four line image" has been applied in the Edit > Change columns dialog, the image will be displayed in both the table and the info window.
</p>
</section>
<section id="anchor-2">
<h3>Alexander County</h3>
<p><strong>Really good quote</strong>
</p>
<p>The default automatic template shows the data from the first 10 columns. Check or uncheck the box next to the column name to include it in the automatic info window.Any format applied to the data in the column will show here. For example, if a column
contains URLs to images and the format "Four line image" has been applied in the Edit > Change columns dialog, the image will be displayed in both the table and the info window.
</p>
</section>
<section id="anchor-3">
<h3>Alleghany County</h3>
<p><strong>Really good quote</strong>
</p>
<p>The default automatic template shows the data from the first 10 columns. Check or uncheck the box next to the column name to include it in the automatic info window.Any format applied to the data in the column will show here. For example, if a column
contains URLs to images and the format "Four line image" has been applied in the Edit > Change columns dialog, the image will be displayed in both the table and the info window.
</p>
</section>
<section id="anchor-4">
<h3>Anson County</h3>
<p><strong>Really good quote</strong>
</p>
<p>The default automatic template shows the data from the first 10 columns. Check or uncheck the box next to the column name to include it in the automatic info window.Any format applied to the data in the column will show here. For example, if a column
contains URLs to images and the format "Four line image" has been applied in the Edit > Change columns dialog, the image will be displayed in both the table and the info window.
</p>
</section>