2

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:

Google Maps View

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!

2
  • Did you figure out a solution for this? Commented Sep 21, 2022 at 18:25
  • I did however I trashed this project and don't believe I have the solution on hand anymore... @Richardsondx Commented Sep 21, 2022 at 18:38

1 Answer 1

2

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

import {HeatmapLayerF, MarkerF} from '@react-google-maps/api';
Sign up to request clarification or add additional context in comments.

1 Comment

I have a problem with HeatmapLayerF, when I build the app throw the next error: ` Attempted import error: 'HeatmapLayerF' is not exported from '@react-google-maps/api' (imported as 'HeatmapLayerF').`

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.