// now we can set the data
google.maps.event.addListenerOnce(map, "idle", function(){
// this is important, because if you set the data set too early, the latlng/pixel projection doesn't work
heatmap.setDataSet(testData);
});

};
</script>
</html>

I'm getting the google map rendering in my div as I expect, but the heatmap itself isn't rendering on the lat-long data points provided by testData.

I also increased the count value for each of these points; a point value of 1 is not visible, but increasing it's value (e.g. to 100) increases the intensity of the colour of the rendered point (thereby making it visible!).

The problem appears to occur when points are drawn outside of the visible map boundary. I deduced this by debugging:

heatmap.setDataSet(testData);

(uncomment "debugger;" in the fiddle to debug the code in the web console)

The code within heatmap-gmaps.js which is causing the datapoints to not be rendered is here:

It appears that none of the datapoints in your example are contained within the current bounds of the rendered map area. Hence "!currentBounds.contains(latlng)" is always true, causing no points to be added to the mapdata object.

This assumption seems to be true because the first point in your dataSet (i.e. lat: 33.5363, lng:-117.044) is in fact in San Diego (use this to confirm http://itouchmap.com/latlong.html), which is not visible on the rendered map.