I'm trying to use the Google Maps API to generate a heatmap of locations. It works, but the result is not very useful, since the parts rendered by the heatmap are small are hard to see:
Nothing in the docs suggest a way to expand the heatmap to render in larger blobs. Is there an undocumented way of doing this or is this just a limitation of the API? Do I just need more data points? I've pasted the code I'm using below.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#map {
height: 100%
}
</style>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(44.646959,-63.589697);
var myOptions = {
zoom : 14,
center : myLatlng,
mapTypeId : google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map'), myOptions);
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '[ fusion table id removed ]'
},
heatmap: { enabled: true }
});
layer.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map"></div>
</body>
</html>
I'm trying to use the Google Maps API to generate a heatmap of locations. It works, but the result is not very useful, since the parts rendered by the heatmap are small are hard to see:
Nothing in the docs suggest a way to expand the heatmap to render in larger blobs. Is there an undocumented way of doing this or is this just a limitation of the API? Do I just need more data points? I've pasted the code I'm using below.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#map {
height: 100%
}
</style>
<script type="text/javascript" src="http://maps.google./maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(44.646959,-63.589697);
var myOptions = {
zoom : 14,
center : myLatlng,
mapTypeId : google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map'), myOptions);
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '[ fusion table id removed ]'
},
heatmap: { enabled: true }
});
layer.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map"></div>
</body>
</html>
3 Answers
Reset to default 3Check out maxIntensity. I had a similar issue. maxIntensity bined with radius fixed it.
maxIntensity: The maximum intensity of the heatmap. By default, heatmap colors are dynamically scaled according to the greatest concentration of points at any particular pixel on the map. This property allows you to specify a fixed maximum. Setting the maximum intensity can be helpful when your dataset contains a few outliers with an unusually high intensity.
If you use the Google Maps Javascript API v3 (as opposed to the Fusion Tables API you are currently using) you can set the 'radius' property of your heatmap object to do exactly what you're attempting to do.
Unfortunately, there is no way to do this using the Fusion Tables API. The documentation even mentions this explicitly:
Fusion Table Layer: No ability to customize the appearance of the heatmap.
Yes there is.
Check out the code I'm using:
heatmap = new google.maps.visualization.HeatmapLayer({
dissipating: true,
map: map,
radius: 50
});
The radius is measured in meters, so my blobs will be 100 meters in diameter. Let me know if this helps you.