react-google-maps HeatmapLayer undefined

Question

I wanna use HeatmapLayer from react-google-maps but I get the error blow:

Uncaught (in promise) TypeError: Cannot read property 'HeatmapLayer' of undefined

I've been triying to make this thing works but i couldn't hit the nail on the head, also looking in this link there's nothing helpful (https://github.com/tomchentw/react-google-maps/issues/409)

import {withGoogleMap,GoogleMap} from "react-google-maps"
import HeatmapLayer from "react-google-maps/lib/visualization/HeatmapLayer"

render(){

var data = [new window.google.maps.LatLng(37.782551, -122.445368),
            new window.google.maps.LatLng(37.782745, -122.444586),
            new window.google.maps.LatLng(37.782842, -122.443688),
            new window.google.maps.LatLng(37.782919, -122.442815),
            new window.google.maps.LatLng(37.782992, -122.442112),
            new window.google.maps.LatLng(37.783100, -122.441461)
      ]
  const Heatmap = withGoogleMap(props => (


));

return(
  

  }
  mapElement={
    
  }
  center={{ lat: -25.363882, lng: 131.044922 }}
/>
)
}
}

user_2315280 · Answer

Your import location is wrong I believe. It should be like below. More info here

import HeatmapLayer from "react-google-maps/lib/components/visualization/HeatmapLayer";

user_1458162 · Answer

See the Using the library section:

https://developers.google.com/maps/documentation/javascript/visualization

user_12856243 · Answer

To be able to access visualization library in google maps react create you can do something like this

/*global google*/
import React, {
  Component
} from React;
import {
  GoogleApiWrapper,
  Map
} from "google-maps-react";

class YourComponent extends Component {
constructor(props){
super(props);
this.mapRef= React.createRef();
}

componentDidMount(){
    //you can access your visualization lib through this
    console.log(google.maps.visualization);
    
    //you can access you map reference through
    this.mapRef.current.map
}

  render() {
    return 
      <
      /Map>
  }
}

export default GoogleApiWrapper((props) => ({
  apiKey: yourapikey,
  libraries: ["visualization"],
}))(YourComponent);

react-google-maps HeatmapLayer undefined

3 Answers