I had some code very similar to this that broke because I was using window.onload to load the maps but also had a different onload function in my body tag that was empty. At some point, it looks like the browser switched from ignoring the empty body tag to causing it to disable/overwrite the window.onload. This was hard to track down as there were no errors.



Disable uBlock Origin (or possibly some other Firefox Add-on) on the pages that exhibit this error.

Answer: This happened to me in Firefox but not in Chrome. In Chrome, everything worked as expected, so I started to suspect my Firefox Add-ons. I disabled everything and discovered that the maps now worked in Firefox. After carefully re-enabling all Add-ons, I discovered that the uBlock Origin add-on was interfering with the javascript. Simply disabling uBlock Origin on the page you are loading in Firefox is sufficient to permit the script to function properly.


change this line

var heatmap = h337.create(


var heatmap = window.h337.create(


okay you are lucky i found the error, you have to pass the "container" property to the heatmap options:

    heatmap = window.h337.create(
        "container": document.getElementById("heatmapArea"),
        "element": document.getElementById("heatmapArea"),
        "radius" : 11,
        "opacity": 40,
        "visible": true,
        "gradient" : { 0.45: "rgb(0,0,255)", 0.55: "rgb(0,255,255)", 0.65: "rgb(0,255,0)", 0.95: "yellow", 1: "rgb(255,0,0)"}

for me this works :)

Related Query

More Query from same tag