javascript - Google heat map change colour based on intensity -


i have crested heat-map using google maps js api. locations weighted , color represent weights instead getting red dot fades yellow , green. not test , populating zip codes , weights database

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=visualization"></script> 

.

function initialize() {     geocoder = new google.maps.geocoder();   var mapprop = {     center:new google.maps.latlng(40.785091,-73.968285),     zoom:11,     maptypeid:google.maps.maptypeid.roadmap   };   var map=new google.maps.map(document.getelementbyid("googlemap"),mapprop);    codeaddress("10001", 6119);   codeaddress("10002", 5180);   codeaddress("10003", 4110);   codeaddress("10004", 899);   codeaddress("10005", 520);   codeaddress("10006", 599);     function codeaddress(zip, noaccidents) {     //var address = document.getelementbyid("address").value; geocoder.geocode( { 'address': zip}, function(results, status) {       if (status == google.maps.geocoderstatus.ok) {         map.setcenter(results[0].geometry.location);          var hotspot = results[0].geometry.location;         console.log(hotspot + " " + noaccidents);          var heatmapzip = [         {location: hotspot, weight: noaccidents}          ];         var color =[             "#ff0000",             "#00ff00"         ];          var heatmap = new google.maps.visualization.heatmaplayer({           data: heatmapzip,           radius: 50,           dissapating: false         });         heatmap.setmap(map);        } else {         alert("geocode not successful following reason: " + status);       }     });   }   }  google.maps.event.adddomlistener(window, 'load', initialize); 

map

you should use function heatmap.set('gradient', gradient); set color of heat map. color can calculated # of accident, , max , min of # in data set.

i created fiddle that, hope helps.

http://jsfiddle.net/hzy0y6es/


Comments