Configuring heatmap overlays using Google Maps API
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.com/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>
Answer
Check out maxIntensity. I had a similar issue. maxIntensity combined 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.