GoogleMaps - HeatMap
by Eric Miller
HTML
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script>
<button class="btn btn-add action-addLayer" type="button">Add Layer</button>
<div id="map-canvas"></div>
CSS
#map-canvas {
display:block;
height:400px;
width:600px;
background:#000;
}
JavaScript
(function ($) {
var map, pointArray, heatmap, dataPoints = [],
layers = [],
$loader = $('.loader, .loader-overlay'),
animation_speed = 666,
$addLayerBtn = $('.btn.action-addLayer'),
gradients = [{
"0": "rgba(255,255,255,0)",
"0.29": "rgba(148,0,0,1)",
"0.33": "rgba(170,0,0,1)",
"0.37": "rgba(191,0,0,1)",
"0.42": "rgba(212,0,0,1)",
"0.46": "rgba(233,0,0,1)",
"0.50": "rgba(255,0,0,1)",
"0.54": "rgba(255,21,21,1)",
"0.58": "rgba(255,42,42,1)",
"0.62": "rgba(255,63,63,1)",
"0.67": "rgba(255,85,85,1)",
"0.71": "rgba(255,106,106,1)",
"0.75": "rgba(255,127,127,1)",
"0.79": "rgba(255,148,148,1)",
"0.83": "rgba(255,170,170,1)",
"0.87": "rgba(255,191,191,1)",
"0.92": "rgba(255,212,212,1)",
"0.96": "rgba(255,233,233,1)",
"1.00": "rgba(255,255,255,1)"
}, {
"0": "rgba(255,255,255,0)",
"0.29": "rgba(0,0,148,1)",
"0.33": "rgba(0,0,170,1)",
"0.37": "rgba(0,0,191,1)",
"0.42": "rgba(0,0,212,1)",
"0.46": "rgba(0,0,233,1)",
"0.50": "rgba(0,0,255,1)",
"0.54": "rgba(21,21,255,1)",
"0.58": "rgba(42,42,255,1)",
"0.62": "rgba(63,63,255,1)",
"0.67": "rgba(85,85,255,1)",
"0.71": "rgba(106,106,255,1)",
"0.75": "rgba(127,127,255,1)",
"0.79": "rgba(148,148,255,1)",
"0.83": "rgba(170,170,255,1)",
"0.87": "rgba(191,191,255,1)",
"0.92": "rgba(212,212,255,1)",
"0.96": "rgba(233,233,255,1)",
"1.00": "rgba(255,255,255,1)"
}, {
"0":...