score:-1

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.

score:1

TL;DR

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.

score:3

change this line

var heatmap = h337.create(

to

var heatmap = window.h337.create(

Update:

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