The error message "Google Heatmap API - visualization_impl.js:2 Uncaught (in promise) TypeError: Cannot read property 'NaN' of undefined" was encountered while using the

Question

The error message "Google Heatmap API - visualization_impl.js:2 Uncaught (in promise) TypeError: Cannot read property 'NaN' of undefined" was encountered while using the

I'm currently working on a project that involves utilizing a JSON data structure like the one shown below:

 [
    {               
        "lat": 53.1522756706757,
        "lon": -0.487157731632087,
        "size": 63,
        "field": "TestField",
        "variety": "TestVariety",
        "count": 1
    }
]

This JSON will contain additional entries with different locations and count values. However, I am encountering an error titled above when implementing the following code.

    let map;
let testField = new google.maps.LatLng(53.150, -0.488);

let options = {
    zoom: 6,
    center: testField,
    mapTypeId: 'satellite',
};
function createMap(data) {
    let mapElement = document.getElementById('map');
    let geometry, weighted, count, heatData;
    let heatmap, points;
    map = new google.maps.Map(mapElement, options);

    heatData = [];
    for (var i = 0; i < data.length; i++) {
        geometry = data[i];
        weighted = {};
        count = data[i].count;
        weighted.location = new google.maps.LatLng(
              data.lat,
              data.lon);
        weighted.weight = count
        heatData.push(weighted);
    }

    points = new google.maps.MVCArray(heatData);
    console.log(data);   

    heatmap = new google.maps.visualization.HeatmapLayer({
        data: points,
        opacity: 0.9,
        radius: 20
    });

    heatmap.setMap(map);
}

    $(function () {
      $.ajax({
          type: "GET",
          url: "field_example.json",
          dataType: "json",
          success: createMap
      });
    });

It seems like there is a concept that eludes me in this process, and any assistance would be greatly appreciated.

javascript arrays json google-maps heatmap

Answer 1

Answer №1

If you encounter the error message:

TypeError: Cannot read property 'NaN' of undefined

, it is likely due to the fact that both data.lat & data.lon are undefined. One way to resolve this issue is by substituting data.lat with geometry.lat and data.lon with `geometry.lon` (or utilizing data[i] instead of data).

for (var i = 0; i < data.length; i++) {
   var weighted = {};
   count = data[i].count;
   weighted.location = new google.maps.LatLng(
     data[i].lat,
     data[i].lon);
   weighted.weight = count
   heatData.push(weighted);
}
heatmap = new google.maps.visualization.HeatmapLayer({
   data: heatData
});

Check out a proof of concept fiddle here

Code Snippet:

// This example requires the Visualization library. Include the libraries=visualization
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization">

var map, heatmap;

function initMap() {
  let map;
  let testField = new google.maps.LatLng(53.150, -0.488);

  let options = {
    zoom: 6,
    center: testField,
    mapTypeId: 'satellite',
  };
  var data = [{
    "lat": 53.1522756706757,
    "lon": -0.487157731632087,
    "size": 63,
    "field": "TestField",
    "variety": "TestVariety",
    "count": 1
  }]

  function createMap(data) {
    let mapElement = document.getElementById('map');
    let count, heatData;
    let heatmap, points;
    map = new google.maps.Map(mapElement, options);

    heatData = [];
    console.log(data.length);
    for (var i = 0; i < data.length; i++) {
      var weighted = {};
      count = data[i].count;
      weighted.location = new google.maps.LatLng(
        data[i].lat,
        data[i].lon);
      weighted.weight = count
      heatData.push(weighted);
    }

    points = heatData;
    console.log(points);

    heatmap = new google.maps.visualization.HeatmapLayer({
      data: heatData
    });

    heatmap.setMap(map);
  }
  createMap(data);
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?v=3.41&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=visualization&callback=initMap">
</script>

Answer 2

If you encounter the error message:

TypeError: Cannot read property 'NaN' of undefined

, it is likely due to the fact that both data.lat & data.lon are undefined. One way to resolve this issue is by substituting data.lat with geometry.lat and data.lon with `geometry.lon` (or utilizing data[i] instead of data).

for (var i = 0; i < data.length; i++) {
   var weighted = {};
   count = data[i].count;
   weighted.location = new google.maps.LatLng(
     data[i].lat,
     data[i].lon);
   weighted.weight = count
   heatData.push(weighted);
}
heatmap = new google.maps.visualization.HeatmapLayer({
   data: heatData
});

Check out a proof of concept fiddle here

Code Snippet:

// This example requires the Visualization library. Include the libraries=visualization
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization">

var map, heatmap;

function initMap() {
  let map;
  let testField = new google.maps.LatLng(53.150, -0.488);

  let options = {
    zoom: 6,
    center: testField,
    mapTypeId: 'satellite',
  };
  var data = [{
    "lat": 53.1522756706757,
    "lon": -0.487157731632087,
    "size": 63,
    "field": "TestField",
    "variety": "TestVariety",
    "count": 1
  }]

  function createMap(data) {
    let mapElement = document.getElementById('map');
    let count, heatData;
    let heatmap, points;
    map = new google.maps.Map(mapElement, options);

    heatData = [];
    console.log(data.length);
    for (var i = 0; i < data.length; i++) {
      var weighted = {};
      count = data[i].count;
      weighted.location = new google.maps.LatLng(
        data[i].lat,
        data[i].lon);
      weighted.weight = count
      heatData.push(weighted);
    }

    points = heatData;
    console.log(points);

    heatmap = new google.maps.visualization.HeatmapLayer({
      data: heatData
    });

    heatmap.setMap(map);
  }
  createMap(data);
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?v=3.41&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=visualization&callback=initMap">
</script>

The error message "Google Heatmap API - visualization_impl.js:2 Uncaught (in promise) TypeError: Cannot read property 'NaN' of undefined" was encountered while using the

Answer №1

Similar questions

Implementing a click event on a button within an infowindow on Google Maps in Angular

"Can you tell me the method for obtaining an array within an Angular

Tips for dynamically changing the body class based on the page in a remix

What caused the sudden malfunction in the extended Express Request?

Converting the length attribute of a table to a string does not yield any

Dynamic Rendering of Object Arrays in Table Columns using JavaScript

Using React to create an onScroll event listener within a mapped array

Launching the Skeleton feature in NextJS with React integration

Create a query string using JavaScript and combine multiple parameters into a single param

Having trouble navigating through multiple layers of nested array data in react js

Preventing special characters in an input field using Angular

Vue JS: Easily Calculate the Total Sum of All Columns

Run a script on a specific div element exclusively

Using JavaScript to set attribute values in Python Selenium, these values are cleared after each update

Extracting the chosen content from a textarea using AngularJS

How can I implement jQuery Ajax to handle multiple elements on a single webpage?

Access in-depth data by clicking on a map to get detailed information

What is the method for creating a function using the const keyword in JavaScript?

The JSON was found to be invalid but was later verified as valid using an online tool

Enhanced coding experience with JavaScript completion and ArangoDB module management