Heatmap Layer not displaying in Google Maps API (@react-google-maps/api)

Question

I'm trying to get a Heatmap layer to show within google maps inside my React application. When I npm start I get the following application:

However, there is no visible Heatmap layer even though I provided the HeatmapLayer as a child component to the GoogleMap comp and passed in hardcoded data in the format as described by the documentation that can be found here: https://www.npmjs.com/package/@react-google-maps/api

import env from "react-dotenv";
import React, { useState } from 'react'
import { GoogleMap, useLoadScript, HeatmapLayer } from '@react-google-maps/api'

const containerStyle = {
  width: '400px',
  height: '400px'
};

const center = {
  lat: 37.765153,
  lng: -122.418618
};

function App() {

  const {isLoaded} = useLoadScript({
    googleMapsApiKey: env.REACT_APP_MAPS_API_KEY,
    libraries: ["visualization"],
  })
  
  const [map, setMap] = useState(null)
  
  const onLoad = React.useCallback(function callback(map) {
    const bounds = new window.google.maps.LatLngBounds(center);
    map.fitBounds(bounds);
    setMap(map)
  }, [])

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

  if (!isLoaded) {
    return <div>Loading</div>
  }

  const heatmapData = 
    [
      new window.google.maps.LatLng(37.765153, -122.418618),
      new window.google.maps.LatLng(37.765136, -122.419112),
      new window.google.maps.LatLng(37.765129, -122.419378),
      new window.google.maps.LatLng(37.765119, -122.419481),
      new window.google.maps.LatLng(37.7651, -122.419852),
    ]

  return (
    <GoogleMap
      mapContainerStyle={containerStyle}
      center={center}
      zoom={10}
      onLoad={onLoad}
      onUnmount={onUnmount}
    >
      <HeatmapLayer data={heatmapData} />
    </GoogleMap>
  );
}

export default App;

I just started working with this API and do not fully understand how it works. An explanation of the onLoad/onUnmount and map object would be very much appreciated alongside a solution.

Thanks all!

Answer 1

if you are using the latest versions of React then try instead of

import {HeatmapLayerF, MarkerF} from '@react-google-maps/api';