Click Button for Heatmap.js

Im using Heatmap.js to create a heat map with the button pressed. My heatmap is displayed correctly by pressing a button, but there is an error message in the chrome js console.

My code is:

$(document).ready(function() {
var mapOptions = ...
var myLatlng = ...
var map = new google...

$('button#toggleTca').click(function(){
        drawHeatmap();
    });

  function drawHeatmap() {
        // heatmap layer
        heatmap = new HeatmapOverlay(map, 
        {
            // radius should be small ONLY if scaleRadius is true (or small radius is intended)
            "radius": 0.00005,
            "maxOpacity": 1, 
            // scales the radius based on map zoom
            "scaleRadius": true, 
            // if set to false the heatmap uses the global maximum for colorization
            // if activated: uses the data maximum within the current map boundaries 
            //   (there will always be a red spot with useLocalExtremas true)
            "useLocalExtrema": true,
            // which field name in your data represents the latitude - default "lat"
            latField: 'lat',
            // which field name in your data represents the longitude - default "lng"
            lngField: 'lng',
            // which field name in your data represents the data value - default "value"
            valueField: 'count'
        });

        var testData = {
            max: 8,
            data: [{lat: 1.298568, lng:103.772210, count: 30},
          {lat: 1.298581, lng:103.772103, count: 28}]
        };

        heatmap.setData(testData);
    }
});

I have the following errors:

Uncaught TypeError: cannot read property 'fromLatLngToDivPixel' undefined gmaps-heatmap.js: 150

When I keep clicking on it, more errors appear:

Uncaught TypeError: Cannot read the 'setData' property from undefinedGMaps-heatmap.js: 191

However, if I remove click function:

$(document).ready(function() {
    var mapOptions = ...
    var myLatlng = ...
    var map = new google...

    drawHeatmap("tca");
    ...The rest will be the same from here...

The error will disappear and the heatmap is still loaded.

Any idea why the message shows undefinedand how to draw a heat map with the click of a button?

+4

All Articles