Fusion Tables Layer Plate with Markers
I am trying to create something similar to this, but I am having problems with this:
https://google-developers.appspot.com/maps/documentation/javascript/examples/layer-heatmap
I have about 35k records stored in Fusion tables that I would like to use to create a heatmap. The dataset contains lat, long and counts.
I would also like to add another layer on top of the top of the map, which will be displayed as markers on the map (this dataset is also stored in Fusion tables, about 600 rows. How can I replace the taxiData below with the coordinates from my Fusion table?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Heatmap Layer</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script>
<script>
// Adding 500 Data Points
var map, pointarray, heatmap;
var taxiData = [
new google.maps.LatLng(37.782551, -122.445368),
new google.maps.LatLng(37.782745, -122.444586),
new google.maps.LatLng(37.782842, -122.443688),
new google.maps.LatLng(37.782919, -122.442815),
new google.maps.LatLng(37.782992, -122.442112),
new google.maps.LatLng(37.783100, -122.441461),
new google.maps.LatLng(37.783206, -122.440829)
];
function initialize() {
var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(37.774546, -122.433523),
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
pointArray = new google.maps.MVCArray(taxiData);
heatmap = new google.maps.visualization.HeatmapLayer({
data: pointArray
});
heatmap.setMap(map);
}
function toggleHeatmap() {
heatmap.setMap(heatmap.getMap() ? null : map);
}
function changeGradient() {
var gradient = [
'rgba(0, 255, 255, 0)',
'rgba(0, 255, 255, 1)',
'rgba(0, 191, 255, 1)',
'rgba(0, 127, 255, 1)',
'rgba(0, 63, 255, 1)',
'rgba(0, 0, 255, 1)',
'rgba(0, 0, 223, 1)',
'rgba(0, 0, 191, 1)',
'rgba(0, 0, 159, 1)',
'rgba(0, 0, 127, 1)',
'rgba(63, 0, 91, 1)',
'rgba(127, 0, 63, 1)',
'rgba(191, 0, 31, 1)',
'rgba(255, 0, 0, 1)'
]
heatmap.setOptions({
gradient: heatmap.get('gradient') ? null : gradient
});
}
function changeRadius() {
heatmap.setOptions({radius: heatmap.get('radius') ? null : 20});
}
function changeOpacity() {
heatmap.setOptions({opacity: heatmap.get('opacity') ? null : 0.2});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="height: 600px; width: 800px;"></div>
<button onclick="toggleHeatmap()">Toggle Heatmap</button>
<button onclick="changeGradient()">Change gradient</button>
<button onclick="changeRadius()">Change radius</button>
<button onclick="changeOpacity()">Change opacity</button>
</body>
</html>
source to share
For merge tables, you don't create a HeatmapLayer, but rather a FusionTablesLayer like so :
layer = new google.maps.FusionTablesLayer({
query: {
select: 'LATITUDE',
from: '0ILwUgu7vj0VSZnVzaW9udGFibGVzOjEzNjcwNQ'
},
heatmap: {
enabled: true
}
});
layer.setMap(map);
You can limit the data added to the query where:
.
To make a layer with simple markers using a merge table, just leave a part heatmap: { enabled: true }
.
source to share