I followed a sample code to create a fusion tables map with 'heatmap' (hotspots as I called it) but it's not working. Could someone take a look on it, please?
I don't know whether the problem is with some syntax element (but the code didn't break) or with the form element? Another possibility could be that there are just a few points, and it's not possible to produce a heatmap only with that points. But I never heard of such a technical issue.
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas { width:500px; height:400px; }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layerl0;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(0, 0),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layerl0 = new google.maps.FusionTablesLayer({
query: {
select: "'ENDERECO_GOOGLE'",
from: 3767057
},
map: map
});
google.maps.event.addDomListener(document.getElementById('heatmap'),
'click', function() {
var heatmap = document.GetElementById('heatmap');
layer.setOptions({
heatmap: {
enabled: heatmap.checked
}
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div>
<input id="heatmap" type="checkbox" />
<label>Hotspots</label>
</div>
</body>
</html>
You've got 2 syntax errors in the file you posted.
document.GetElementById();
// must be
document.getElementById();
and
layer.setOptions()
// must be
layerl0.setOptions()