Heatmap.js可点击按钮

Question

我使用Heatmap.js创建一个带有按钮的热图.单击按钮可以正确显示我的热图,但chrome js控制台中有一条错误消息.

我的代码:

$(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);
    }
});

我有以下错误:

未捕获的TypeError:无法读取未定义的gmaps-heatmap.js的属性'fromLatLngToDivPixel':150

当我继续点击它时,会出现更多错误:

未捕获的TypeError:无法读取未定义的gmaps-heatmap.js的属性'setData':191

但是,如果我删除click function:

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

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

错误将消失,热图仍然会加载.

知道消息显示的原因undefined以及如何使用单击按钮操作绘制热图吗？