javascript - How to customize heatmap color on pre decided constraint values? -

i working on heatmap , situation have change color of heat map marker on basis of constraints , color should change according basic constraints values. approach this:

function heatmapcreate(heatmapdata, getnumberfromstring)     //  heatmapdata contains object of latlng , number   constraint     // contains number on basis of set color     // (green if 48 , red if 36 else yellow)         {             var gradient;             var heatmap = new google.maps.visualization.heatmaplayer(                         {                             data: heatmapdata,                         });             heatmap.setoptions({ radius: heatmap.get('20') });              if (getnumberfromstring == 36)             {                 gradient = [for red color]             }             else if(getnumberfromstring == 48)             {              gradient = [for green color]             }             else             {                 gradient = [for yellow color]              }              heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);             heatmap.setmap(map);         } 

how achieve ? i bit surprised there not single answer (even comment) answer, makes me feel either question bad or impossible have heatmap markers of different color ? 1 please me ?

your penultimate line of code looks you've copied google's example demonstrates toggling between 2 gradients.

heatmap.set('gradient', heatmap.get('gradient') ? null : gradient); 

it's not best example honest; they're either setting gradient 1 they've specified, or setting null, i.e. defaulting gradient google's default colour scheme.

instead want have own gradients defined already, , toggle between them in response getnumberfromstring value. here's untested example. i've gone 'blue' colour last one, because easier! want come own set of colours; expect there's online tools can produce these quite quickly, e.g. http://angrytools.com/gradient/

function heatmapcreate(heatmapdata, getnumberfromstring) {     var gradients = {         red: [             'rgba(255, 0, 0, 0)',             'rgba(255, 0, 0, 1)'         ],         green: [             'rgba(0, 255, 0, 0)',             'rgba(0, 255, 0, 1)'         ],         blue: [             'rgba(0, 0, 255, 0)',             'rgba(0, 0, 255, 1)'         ]     };     var heatmap = new google.maps.visualization.heatmaplayer({         data: heatmapdata,         radius: 20,         map: map     });      switch (getnumberfromstring) {         case 36:             heatmap.set('gradient', gradients['red']);             break;         case 48:             heatmap.set('gradient', gradients['green']);             break;         default:             heatmap.set('gradient', gradients['blue']);             break;      } } 

see also: https://developers.google.com/maps/documentation/javascript/heatmaplayer