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

https://i.sstatic.net/rwJBw.png

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

https://i.sstatic.net/rwJBw.png

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 Facebook Javascript SDK to enable login and trigger re-authentication using React Web and Typescript within a component

Covering a doughnut shape with a twisting spiral

A comparison between preg_match and stripos functions in PHP

Unable to successfully interact with Paypal button using selenium automation

In search of a solution to effectively narrow down data within an Azure API request

Serialization and deserialization of empty arrays into dictionaries/objects

iPad is playing the incorrect file when using .play(). Any ideas on how to fix this issue?

How to incorporate text into the white circle object using three.js

What impact does setting a variable equal to itself within a Dom Object have?

Leveraging JavaScript to identify web browsers

Introduce regex in the middle

Converting personal injury claims into configuration maps with the help of jq

Guidelines for showcasing validation summary on an ASP.NET webpage with the help of Javascript

Issue with React Hot Toast not displaying properly due to being positioned behind the <dialog>

"Creating a duplicate of an element by utilizing the `next`

Troubleshooting Vue 3: Dealing with Synchronization Issues Between Keyboard Input and

Obtain an individual item from the reducer array

Python is not triggering the custom object_hook function in JSON parsing

Tracking the progress bar as files are being uploaded via AJAX using HTML5

Enhance the efficiency of parsing JSON data