CODEWITHSUNDEEP
javascriptgoogle-maps-api-3heatmap
user3306762
user3306762

Reputation: 143

Google Heat Maps displaying red blocks

Some data is producing Google Heat Maps to display red blocks instead of the Heat Layer. I checked my information but I couldn't find anything wrong, here is my code:

 for (i = 0; i < markers.length; i++) {
            if (markers[i].lat != " ") {
               mar.push(markers[i]);
               var weightedLoc = {
                 location: new google.maps.LatLng(mar[j].lat,mar[j].lon),
                 weight: mar[j].Intensity
               };
               heat.push(weightedLoc);
               j++;
            }         
        }
        var mapOptions = {
             zoom: 10,
             center: new google.maps.LatLng(mar[0].lat, mar[0].lon)
          };
          map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
         var pointArray = new google.maps.MVCArray(heat);
          heatmap = new google.maps.visualization.HeatmapLayer({
            data: heat
          });
            heatmap.setMap(map);

My data is in this json format:

[
{"lat":"-0.05487","lon":"-78.45286","Intensity":"1.86"},
{"lat":"-0.09377","lon":"-78.45136","Intensity":"2"}, 
{"lat":"-0.05489","lon":"-78.45283","Intensity":"0.6"}
]

Heat Maps Red Blocks

Thanks!

Upvotes: 4

Views: 1472

Answers (2)

scottysseus
scottysseus

Reputation: 2010

When I experienced this problem, it was because I was accidentally passing empty strings values into the LatLng constructors.

See below:

for (i = 0; i < coords.length; i++) {
    var lat = coords[i]
    var long = coords[++i]

    points.push(new google.maps.LatLng(lat, long)); //<-- no checks on lat, long 
}

// heatmap layer
heatmap = new google.maps.visualization.HeatmapLayer({
    data: points,
    map: map
});

I discovered that there was a potential for lat or long to be empty, so I made the following change:

    if (!lat.isEmpty() && !long.isEmpty()) {
        points.push(new google.maps.LatLng(lat, long));
    }

If the accepted answer does not solve your problems, check to ensure that all of the points you are passing to the heat map are valid.

Upvotes: 1

Dr.Molle
Dr.Molle

Reputation: 117324

weight has to be of type number, currently it's a string.
Convert it via :

weight: parseFloat(mar[j].Intensity)

proof of concept fiddle

code snippet:

function initialize() {
  var markers = [{
    "lat": "-0.05487",
    "lon": "-78.45286",
    "Intensity": "1.86"
  }, {
    "lat": "-0.09377",
    "lon": "-78.45136",
    "Intensity": "2"
  }, {
    "lat": "-0.05489",
    "lon": "-78.45283",
    "Intensity": "0.6"
  }];
  var heat = [];
  for (i = 0; i < markers.length; i++) {
    if (markers[i].lat != " ") {
      // mar.push(markers[i]);
      var weightedLoc = {
        location: new google.maps.LatLng(markers[i].lat, markers[i].lon),
        weight: parseFloat(markers[i].Intensity)
      };
      heat.push(weightedLoc);
      // j++;
    }
  }
  var mapOptions = {
    zoom: 12,
    center: new google.maps.LatLng(markers[0].lat, markers[0].lon)
  };
  map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
  var pointArray = new google.maps.MVCArray(heat);
  heatmap = new google.maps.visualization.HeatmapLayer({
    data: heat
  });
  heatmap.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#dvMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=visualization"></script>
<div id="dvMap"></div>

Upvotes: 3

Related Questions