Fusion Tables fusiontips鼠标悬停事件不起作用
Fusion Tables fusiontips mouseover event not working
我今天使用 Fusion Tables 创建了一张地图，我已经完成了大约 90% 的位置，但我完全坚持在我的地图上启用鼠标悬停事件。基本上我希望县名出现在地图上。我从这里获取了示例代码：
http://gmaps-utility-gis.googlecode.com/svn/trunk/fusiontips/docs/examples.html
我想我已经正确填写了所需的信息。我从 Fusion Tables 自动生成了 HTML/JS 地图。这是我的实时地图：http://www.casalett.net/map/map.html
我们将不胜感激！
代码如下：
<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>
您需要包含对页面所在域有效的 apiConsoleKey，如以下示例：
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 whosebug.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. (<a href="http://gmaps-utility-gis.googlecode.com/svn/trunk/fusiontips/docs/examples.html">documentation</a>)
</div>
<div id='map_canvas'>
</div>
<div id='info'>
</div>
使用您的 table 和我的密钥的代码片段：
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 whosebug.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>
我今天使用 Fusion Tables 创建了一张地图，我已经完成了大约 90% 的位置，但我完全坚持在我的地图上启用鼠标悬停事件。基本上我希望县名出现在地图上。我从这里获取了示例代码： http://gmaps-utility-gis.googlecode.com/svn/trunk/fusiontips/docs/examples.html
我想我已经正确填写了所需的信息。我从 Fusion Tables 自动生成了 HTML/JS 地图。这是我的实时地图：http://www.casalett.net/map/map.html
我们将不胜感激！
代码如下：
<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>
您需要包含对页面所在域有效的 apiConsoleKey，如以下示例：
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 whosebug.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. (<a href="http://gmaps-utility-gis.googlecode.com/svn/trunk/fusiontips/docs/examples.html">documentation</a>)
</div>
<div id='map_canvas'>
</div>
<div id='info'>
</div>
使用您的 table 和我的密钥的代码片段：
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 whosebug.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>