Google Maps Animated Heat Map

Question

I was wondering if it would be possible to animate the heat map I've set up for my Google Map. It was easy enough to set up the google map and add the heat map to it. But it looks quite boring. I wanted to add somekind of a pulse effect to the heat map. Thanks

Answer 1

It's straightforward to animate the heatmap's appearance. The following example sets a custom array of gradient colors and modulates its size. The result is sort of a pulsing effect. You may tweak the colors to your liking in the modulateGradient function or even add changes to the heatmap's opacity. Note, however, that depending on the size of your data set the animation might have a considerable performance impact.

HTML

<div id="map-canvas"></div>

JS

var map, pointarray, heatmap;
var gradient, gradientStep = -1;

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),
    new google.maps.LatLng(37.783273, -122.440324),
    new google.maps.LatLng(37.783316, -122.440023),
    new google.maps.LatLng(37.783357, -122.439794),
    new google.maps.LatLng(37.783371, -122.439687)
];

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);

    var pointArray = new google.maps.MVCArray(taxiData);

    heatmap = new google.maps.visualization.HeatmapLayer({
        data: pointArray
    });

    heatmap.setMap(map);
    setGradient();

    google.maps.event.addListenerOnce(map, 'tilesloaded', modulateGradient);
}

function setGradient() {
    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.set('gradient', gradient);
}

function modulateGradient() {
    var modulator = function() {
        var newGradient = gradient.slice(0, heatmap.get('gradient').length + gradientStep);

        if (newGradient.length == gradient.length || newGradient.length == 7) {
            gradientStep *= -1;
        }

        heatmap.set('gradient', newGradient);

        setTimeout(modulator, 100);
    };

    setTimeout(modulator, 100);
}

google.maps.event.addDomListener(window, 'load', initialize);

You can find a live version of the code on JSFiddle.