my heatmap cannot be rendered, somehow seeing a white screen

Question

Using the react google maps api and trying to render a heatmap however either no heatmap appears or the whole screen goes to a full white page. I have tried using HeatmapLayerF but it does not work too. When it is a white screen, even my tabs at the side and on top disappears, not just the map itself, the whole screen turns to white. I am not sure what I am doing wrong and would appreciate if someone can provide me a correction to my code.

import React, { useState, useEffect, useRef } from 'react';
import { GoogleMap, useJsApiLoader, Marker, InfoWindow, HeatmapLayer } from '@react-google-maps/api';

const containerStyle = {
  width: '92vw',
  height: '92vh'
};

const center = {
  lat: 1.2966,
  lng: 103.7764,
};

//const positions = [
//  { lat: 1.2966, lng: 103.7764 },
//  { lat: 1.2950, lng: 103.7750 },
//];

function Map() {
  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: 'API_KEY', 
    libraries: 'visualization',
  });

  const [map, setMap] = React.useState(null);
  const heatmapRef = useRef(null);


  useEffect(() => {
    if (isLoaded) {
      // The Google Maps JavaScript API with the "visualization" library is loaded.
      // You can use it here to create the HeatmapLayer and map.
      const heatMapData = [
        new window.google.maps.LatLng(1.2966, 103.7764),
        new window.google.maps.LatLng(1.2950, 103.7750),
        new window.google.maps.LatLng(1.2950, 103.7750),
        new window.google.maps.LatLng(1.2950, 103.7750),
        new window.google.maps.LatLng(1.2950, 103.7750),
        new window.google.maps.LatLng(1.2950, 103.7750),
        new window.google.maps.LatLng(1.2950, 103.7750),
        new window.google.maps.LatLng(1.2950, 103.7750),
        new window.google.maps.LatLng(1.2950, 103.7750),
        new window.google.maps.LatLng(1.2950, 103.7750),
        new window.google.maps.LatLng(1.2950, 103.7750),
        // Add more data points as needed
      ];

      const loc = new window.google.maps.LatLng(1.2950, 103.7750);

      const map = new window.google.maps.Map(heatmapRef.current, {
        center: loc,
        zoom: 13,
        mapTypeId: 'satellite',
      });

      const heatmap = new window.google.maps.visualization.HeatmapLayer({
        data: heatMapData,
        map,
      });
      heatmap.setMap(map);
    }
  }, [isLoaded]);


  return isLoaded ? (
    <div style={{ paddingTop: '4vh' }}>
      <GoogleMap
        mapContainerStyle={{
          ...containerStyle,
          outline: 'none',
        }}
        center={center}
        zoom={16.1}
        options={{ // Set the map options here
          mapTypeId: 'satellite', // Change the map type to satellite
        }}
        onLoad={() => {}}
      >
        <div ref={heatmapRef} style={{ width: '100%', height: '100%' }} />
      </GoogleMap>
    </div>
  ) : <></>;
}

export default React.memo(Map);

my code is as follows but nothing works so far, please send help :(((

Answer 1

Just use a <HeatMapLayerF /> component

As per the react-google-maps very outdated styling documentation guide and the Github repo, you can use the HeatMapLayer component for this kind of use case.

To do this, you can just wrap the HeatMapLayer component with the GoogleMapscomponent like so:

<GoogleMap>
  <HeatMapLayerF />
</GoogleMap>

We're gonna use the functional component version HeatMapLayerFto avoid compatibility issue.

Now to address your provided code, there were alot of mistakes and unecessary code. Like the useJsApiLoader loader props libraries which must be instantiated outside the rendered component so that it will be static and it should be an array like so:

const libraries = ["visualization"];

function Map() {
  const { isLoaded } = useJsApiLoader({
    id: "google-map-script",
    googleMapsApiKey: "",
    libraries: libraries
  });
...

To fix things, I just recreated everything with the sample code in the github repo and added your details / options and the HeatMapLayer component:

import React from "react";
import {
  GoogleMap,
  useJsApiLoader,
  HeatmapLayerF
} from "@react-google-maps/api";

const containerStyle = {
  width: "100vw",
  height: "100vh"
};

const center = {
  lat: 1.2966,
  lng: 103.7764
};

const libraries = ["visualization"];

function Map() {
  const { isLoaded } = useJsApiLoader({
    id: "google-map-script",
    googleMapsApiKey: "",
    libraries: libraries
  });

  const [map, setMap] = React.useState(null);

  const onLoad = React.useCallback(function callback(map) {
    setMap(map);
  }, []);

  const onUnmount = React.useCallback(function callback(map) {
    setMap(null);
  }, []);

  return isLoaded ? (
    <GoogleMap
      mapContainerStyle={containerStyle}
      center={center}
      zoom={16}
      onLoad={onLoad}
      onUnmount={onUnmount}
    >
      {/* Child components, such as markers, info windows, etc. */}
      {/* Putting the data array here since it was not working on other places */}
      <HeatmapLayerF
        data={[
          new window.google.maps.LatLng(1.2966, 103.7764),
          new window.google.maps.LatLng(1.295, 103.775),
          new window.google.maps.LatLng(1.295, 103.775),
          new window.google.maps.LatLng(1.295, 103.775),
          new window.google.maps.LatLng(1.295, 103.775),
          new window.google.maps.LatLng(1.295, 103.775),
          new window.google.maps.LatLng(1.295, 103.775),
          new window.google.maps.LatLng(1.295, 103.775),
          new window.google.maps.LatLng(1.295, 103.775),
          new window.google.maps.LatLng(1.295, 103.775),
          new window.google.maps.LatLng(1.295, 103.775)
          // Add more data points as needed
        ]}
      />
    </GoogleMap>
  ) : (
    <></>
  );
}

export default React.memo(Map);

Here's a proof of concept sandbox for you to check for yourself that it is now working fine: https://codesandbox.io/s/heatmap-layer-implementation-frthw9?file=/src/App.js

I hope this helps!