The data points on the Google Maps heatmap are not visible

Question

The data points on the Google Maps heatmap are not visible

We are working on developing a server side application that will utilize the Google Maps API to create weighted heat maps for visualizing data.

Check out the Google Maps API documentation for Heat Maps here

Despite successfully displaying the map, my JavaScript code seems to be having trouble showing the data points. Any suggestions on how to fix this issue?

  function initialize() {

    var mapOptions = {
      zoom: 12,
      center: new google.maps.LatLng(37.774546, -122.433523),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var heatmapData = [
      {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
      new google.maps.LatLng(37.782, -122.445),
      {location: new google.maps.LatLng(37.782, -122.443), weight: 2},
      {location: new google.maps.LatLng(37.782, -122.441), weight: 3},
      {location: new google.maps.LatLng(37.782, -122.439), weight: 2},
      new google.maps.LatLng(37.782, -122.437),
      {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},

      {location: new google.maps.LatLng(37.785, -122.447), weight: 3},
      {location: new google.maps.LatLng(37.785, -122.445), weight: 2},
      new google.maps.LatLng(37.785, -122.443),
      {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
      new google.maps.LatLng(37.785, -122.439),
      {location: new google.maps.LatLng(37.785, -122.437), weight: 2},
      {location: new google.maps.LatLng(37.785, -122.435), weight: 3}
    ];

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

    heatmap.setMap(map);

  }

  function loadScript() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization&callback=initialize';
    document.body.appendChild(script);
  }

  function toggleHeatmap() {
    heatmap.setMap(heatmap.getMap() ? null : map);
  }

  function changeOpacity() {
    heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
  }

  window.onload = loadScript;
  google.maps.event.addDomListener(window, 'load', initialize);

  initialize();

Update 1 - The error in Chrome console states:

Uncaught ReferenceError: google is not defined heatmap:68
Uncaught ReferenceError: heatMapData is not defined heatmap:45
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. VM1930:45
GET https://maps.googleapis.com/maps/gen_204?ev=api_viewport&cad=host:localhost…98x0.65918,size:1920x689,relsize:1.00,token:4b2u2h59g8,src:apiv3,ts:viv6jz net::ERR_BLOCKED_BY_CLIENT VM1937:1
GET https://maps.googleapis.com/maps/gen_204?imp=smimps%3DDCyUJvj7n5l,ZvwOO2ZR5…_mlil,HRlFM3ZVJGn,Jx3V5n-JzIn,F-E4oUlMhVs%26z%3D12&cad=src:apiv3,ts:viv6n3 net::ERR_BLOCKED_BY_CLIENT VM1937:1
GET https://maps.googleapis.com/maps/gen_204?imp=smimps%3DMQc6u1JFizM,0Dl57QyKHf%26z%3D12&cad=src:apiv3,ts:viv6rc net::ERR_BLOCKED_BY_CLIENT VM1937:1
GET https://maps.googleapis.com/maps/gen_204?imp=smimps%3DOk5Wmy33jdt,Dw5TFMIYSGt%26z%3D12&cad=src:apiv3,ts:viv6tf net::ERR_BLOCKED_BY_CLIENT VM1937:1

Update 2 - The JavaScript code is encapsulated within a Jade structure:

doctype 5
html
  head
    title #{title} - picycle
    style
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;

        border: 0.2px solid #999;
      }

    script(type='text/javascript')

<JS CODE FROM ABOVE>

  body

    #panel
      button(onclick='toggleHeatmap()') Toggle Heatmap
      button(onclick='changeOpacity()') Change opacity

    #map-canvas

javascript google-maps

Answer 1

Answer №1

Remember, Javascript is case sensitive: heatmapData is different from heatMapData

Here's how you should define it:

 var heatmapData = [

But make sure to use it correctly:

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

If you see

Uncaught ReferenceError: google is not defined heatmap:68

, it means you're initializing before the API is loaded (remember, you only need to call it once in the callback)

You can remove these unnecessary lines:

  google.maps.event.addDomListener(window, 'load', initialize);

  initialize();

Answer 2

Remember, Javascript is case sensitive: heatmapData is different from heatMapData

Here's how you should define it:

 var heatmapData = [

But make sure to use it correctly:

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

If you see

Uncaught ReferenceError: google is not defined heatmap:68

, it means you're initializing before the API is loaded (remember, you only need to call it once in the callback)

You can remove these unnecessary lines:

  google.maps.event.addDomListener(window, 'load', initialize);

  initialize();

Answer 3

Answer №2

The issue arises from calling initialize towards the end of your code when google.maps has not been fully loaded yet.

Once google maps finishes loading, it also triggers another call to initialize.

Additionally, there is an unnecessary line

google.maps.event.addDomListener(window, 'load', initialize);

since a callback to initialize was already added in the loadScript method here:

script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization&

callback=initialize';

Therefore, it is recommended to delete these lines:

google.maps.event.addDomListener(window, 'load', initialize);

initialize();

Furthermore, remember to maintain consistency in variable names in JavaScript: heatMapData should not be confused with heatmapData

By addressing these points, the errors should be resolved. Feel free to test it out and return if the issue persists.

Answer 4

The issue arises from calling initialize towards the end of your code when google.maps has not been fully loaded yet.

Once google maps finishes loading, it also triggers another call to initialize.

Additionally, there is an unnecessary line

google.maps.event.addDomListener(window, 'load', initialize);

since a callback to initialize was already added in the loadScript method here:

script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization&

callback=initialize';

Therefore, it is recommended to delete these lines:

google.maps.event.addDomListener(window, 'load', initialize);

initialize();

Furthermore, remember to maintain consistency in variable names in JavaScript: heatMapData should not be confused with heatmapData

By addressing these points, the errors should be resolved. Feel free to test it out and return if the issue persists.

The data points on the Google Maps heatmap are not visible

Answer №1

Answer №2

Similar questions

Learn how to retrieve values from a .json file in real-time and then perform comparisons with user input using Python

An issue has arisen with AngularJS and Twitter Bootstrap, displaying an error message stating that the function element.focus

Create an array of objects in JavaScript using JSON data

Height of the Accordion List

Incorporating middleware to handle 404 errors in Express

Identifying Flash content in a unique way

Utilize identical selectbox across various tabs

Unable to retrieve data from a nested object within a JSON structure

Is it causing issues having the same version of jQuery included multiple times?

Contrast between pm.response.json() and parsing the responseBody using JSON.parse()

Tips for refreshing jQuery to ensure it functions smoothly for subsequent tasks

Display outcomes for chosen checkboxes

How to handle a Vue element click event through programming

Creating dynamic web content using PHP and JavaScript

Sending a Thunk to the store using Typescript

Tips for handling Promise.all and waiting for all promises to resolve in an async function in Express JS

InvalidType Error: The roles provided are not in the correct format, it should be a Role, Snowflake, or an Array/Collection of Roles or Snowfl

Transmitting a JavaScript file via a Node.js server

Using Styled Components to achieve full width for input tag in relation to its parent

Animating the mobile menu transition using Bootstrap CSS