Heatmap.js not rendering

I’m attempting to integrate heatmap.js with Google maps to do some visualization work. I referred to this:


As such, my code in my local sample looks nearly identical:

<!DOCTYPE html>
<html lang="en">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">    </script>
<div id="heatmapArea" style="width:1024px;padding:0;height:768px;cursor:pointer;position:relative;"></div>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/heatmap.js"></script>
<script type="text/javascript" src="js/heatmap-gmaps.js"></script>
<script type="text/javascript">
    window.onload = function(){
    // standard gmaps initialization
    var myLatlng = new google.maps.LatLng(48.3333, 16.35);
    // define map properties
    var myOptions = {
      zoom: 3,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      disableDefaultUI: false,
      scrollwheel: true,
      draggable: true,
      navigationControl: true,
      mapTypeControl: false,
      scaleControl: true,
      disableDoubleClickZoom: false
    // we'll use the heatmapArea 
    var map = new google.maps.Map($("#heatmapArea")[0], myOptions);

    // let's create a heatmap-overlay
    // with heatmap config properties
    var heatmap = new HeatmapOverlay(map, {

    // here is our dataset
    // important: a datapoint now contains lat, lng and count property!
    var testData={
            max: 46,
            data: [{lat: 33.5363, lng:-117.044, count: 1},{lat: 33.5608, lng:-117.24,     count: 1},{lat: 38, lng:-97, count: 1},{lat: 38.9358, lng:-77.1621, count: 1}]

    // 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


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.

No errors in the browser console….

Someone see that I’m doing something foolish here?


As heatmap.js v1 has now been retired I have also included an example based on the current version, v2, here:


This is based on the Google Maps example found on the heatmap website.

Read More:   How to find the unicode of the subscript alphabet?

Original Answer

I looked at this and it is definitely confusing. I took your code and got it to work here:


(Note that the original example above no longer works as v1 has been retired, to see this working with v2 see this http://jsfiddle.net/Fresh/pz4usuLe/)

Note how I modified the datapoints within testData to get a result drawn on the map:

var testData = {
    max: 3,
    data: [{
        lat: 48.3333,
        lng: 16.35,
        count: 100
    }, {
        lat: 51.465558,
        lng: 0.010986,
        count: 100
    }, {
        lat: 33.5363,
        lng: -5.044,
        count: 100

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:


(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:

 latlng = new google.maps.LatLng(d[dlen].lat, d[dlen].lng);
 if(!currentBounds.contains(latlng)) {
 me.latlngs.push({latlng: latlng, c: d[dlen].count});
 point = me.pixelTransform(projection.fromLatLngToDivPixel(latlng));
 mapdata.data.push({x: point.x, y: point.y, count: d[dlen].count});

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.

Read More:   Why does {} == false throw an exception?

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Similar Posts