Google Maps Heatmap Snippet

var heatmapData = [];
heatmapData.push(new google.maps.LatLng(0.3395288, 32.6164403));
heatmapData.push(new google.maps.LatLng(0.3365688, 32.6164417));
heatmapData.push(new google.maps.LatLng(0.3395282, 32.6164495));
//...etc
// Add aall positions for the data

initMap();

function initMap(){
    var center = new google.maps.LatLng(1.564312, 32.552067);
    //Colors to use
    var gradient = [
        "rgba(102, 255, 0, 0)",
        "rgba(102, 255, 0, 1)",
        "rgba(147, 255, 0, 1)",
        "rgba(193, 255, 0, 1)",
        "rgba(238, 255, 0, 1)",
        "rgba(244, 227, 0, 1)",
        "rgba(249, 198, 0, 1)",
        "rgba(255, 170, 0, 1)",
        "rgba(255, 113, 0, 1)",
        "rgba(255, 57, 0, 1)",
        "rgba(255, 0, 0, 1)"
    ];

    map = new google.maps.Map(document.getElementById('map'), {
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom: 7,
        draggable: true,
        scrollwheel: true,
        disableDefaultUI: true,
        styles: [ //Map style (optional)
            {
                "featureType": "administrative.land_parcel",
                "stylers": [
                    {
                        "visibility": "off"
                    }
                ]
            },
            {
                "featureType": "administrative.neighborhood",
                "stylers": [
                    {
                        "visibility": "off"
                    }
                ]
            },
            {
                "featureType": "poi",
                "elementType": "labels.text",
                "stylers": [
                    {
                        "visibility": "off"
                    }
                ]
            },
            {
                "featureType": "poi.business",
                "stylers": [
                    {
                        "visibility": "off"
                    }
                ]
            },
            {
                "featureType": "poi.park",
                "elementType": "labels.text",
                "stylers": [
                    {
                        "visibility": "off"
                    }
                ]
            },
            {
                "featureType": "road",
                "stylers": [
                    {
                        "visibility": "off"
                    }
                ]
            },
            {
                "featureType": "road",
                "elementType": "labels",
                "stylers": [
                    {
                        "visibility": "off"
                    }
                ]
            },
            {
                "featureType": "water",
                "elementType": "labels.text",
                "stylers": [
                    {
                        "visibility": "off"
                    }
                ]
            }
        ]
    });

    var maxIntensity = 10; //Max cluster size

    var heatmap = new google.maps.visualization.HeatmapLayer({
        data: heatmapData,
        gradient: gradient,
        maxIntensity: maxIntensity
    });

    heatmap.setMap(map);

    var gradientCss = '(left';
    for (var i = 0; i < gradient.length; ++i) {
        gradientCss += ', ' + gradient[i];
    }
    gradientCss += ')';

    $('#legendGradient').css('background', '-webkit-linear-gradient' + gradientCss);
    $('#legendGradient').css('background', '-moz-linear-gradient' + gradientCss);
    $('#legendGradient').css('background', '-o-linear-gradient' + gradientCss);
    $('#legendGradient').css('background', 'linear-gradient' + gradientCss);

    google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
        //#legendGradient is an container element below the map to hold the intensity scale
        var legendWidth = $('#legendGradient').outerWidth();

        for (var i = 0; i <= maxIntensity; ++i) {
            var offset = i * legendWidth / maxIntensity;
            if (i > 0 && i < maxIntensity) {
                offset -= 0.5;
            } else if (i == maxIntensity) {
                offset -= 1;
            }

            $('#legend').append($('<div>').css({
                'position': 'absolute',
                'left': offset + 'px',
                'top': '15px',
                'width': '1px',
                'height': '3px',
                'background': 'black'
            }));

            $('#legend').append($('<div>').css({
                'position': 'absolute',
                'left': (offset - 5) + 'px',
                'top': '18px',
                'width': '10px',
                'text-align': 'center'
            }).html(i));
        }
    });
}