Javascript google heatmap gradient settings for multiple layers

Question

Using google maps javascript api, I want to create two heatmap overlays with different color gradients for each overlay. So far I have been able to create the two overlays, but when I try to apply a different gradient to each one there is no output.

Here is the code:

  var map, heatmap, heatmap2;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 11,
        center: {lat: 47.608013, lng: -122.335167},
        mapTypeId:'hybrid'
    });
    heatmap = new google.maps.visualization.HeatmapLayer({
        data: getPoints(),
        map: map
        gradient: getGrad()
    });
    heatmap2 = new google.maps.visualization.HeatmapLayer({
        data:   getPoints1(),
        map:    map
        gradient: getGrad1()
    });
  }
function getGrad () {
return [
    rgba(255,0,0,0),
        // more values here
];
}   
function getGrad1 ()    {
return [
    rgba(0,255,255,0),
        //more values here
];
}

To clarify, whenever the gradient properties get commented out everything works with the default gradient. The code above produces no output. Any ideas?

Jonathan Kuhn Jonathan Kuhn · Accepted Answer · 2017-06-06T23:06:13

The gradient values are supposed to be strings. rgba is a css function, not a js one and so in the developer console you should be seeing several errors stating that the function is not defined.

function getGrad1 ()    {
    return [
        'rgba(0,255,255,0)',
            //more values here
    ];
}

Have a look at the example here: https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap

Javascript google heatmap gradient settings for multiple layers

1 Answers