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 .

Answer 2

You can create a kind of pulsing effect by changing the radius size of the heat map layer.

First let's make a var smallRadius and var bigRadius and set values to them; eg smallRadius = 40; bigRadius = 80;

then add the radius size to your var mapOptions and set it to smallRadius .

Then create an animateRadius() function which changes the radius value from smallRadius to bigRadius if it is set to smallRadius , else set the radius to smallRadius .

Then set the function to run every second or so by surrounding the function in a setInterval() .

So Basically this:

var smallRadius = 40;
var bigRadius = 80;

    var mapOptions = {
            zoom: 13,
            center: new google.maps.LatLng(37.774546, -122.433523),
            mapTypeId: google.maps.MapTypeId.SATELLITE,
            radius: smallRadius
        };

//animate radius function

setInterval(function animateRadius()
         {
             if (heatMap.get('radius') === smallRadius)
            {
                heatMap.set('radius', bigRadius);
            }
            else
            {
                heatMap.set('radius', smallRadius);
            }
         }, 1000); // changes radius every 1 second

Obviously you can change the smallRadius and bigRadius to whatever values you want.