user3306762 user3306762 - 7 months ago 11
Javascript Question

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!

Answer

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>