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 = new HeatmapOverlay(map,
{
"radius": 0.00005,
"maxOpacity": 1,
"scaleRadius": true,
"useLocalExtrema": true,
latField: 'lat',
lngField: 'lng',
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?