title: HeatMapLayer Component not working using react-google-maps-api
body: <p>i am using this library to load components for Google maps in my code. <a href="https://github.com/JustFly1984/react-google-maps-api" rel="nofollow noreferrer">@react-google-maps/api</a>
  i am using mainly two Components inside the googlemap wrapper components one is polygon, and other is HeatMapLayer component while i can draw a polygon with Polygon Component but i see the following error with HeatMapLayer Component</p>
  <blockquote>
  <p>Uncaught TypeError: Cannot read properties of undefined (reading 'maps')</p>
  </blockquote>
  <p>this my code to implement the HeatMapLayer</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from "react";
  import { Row, Col } from "reactstrap";
  import { GoogleMap, LoadScript } from "@react-google-maps/api";
  import { Polygon } from "@react-google-maps/api";
  import { HeatmapLayer } from "@react-google-maps/api";
  import myPoly from "./myPoly";
  
  const containerStyle = {
    width: "100%",
    height: "70vh",
  };
  
  const center = {
    lat: 25.6242618,
    lng: 42.3528328,
  };
  
  const options = {
    fillColor: "lightgreen",
    fillOpacity: 0.4,
    strokeColor: "green",
    strokeOpacity: 1,
    strokeWeight: 2,
    clickable: false,
    draggable: false,
    editable: false,
    geodesic: false,
    zIndex: 1,
  };
  
  const onLoad = (polygon, heatmapLayer) =&gt; {
    console.log("polygon: ", polygon);
    console.log("HeatmapLayer onLoad heatmapLayer: ", heatmapLayer);
  };
  
  const onUnmount = (heatmapLayer) =&gt; {
    console.log("HeatmapLayer onUnmount heatmapLayer: ", heatmapLayer);
  };
  
  class ReactMaps extends Component {
    render() {
      return (
        &lt;LoadScript
          googleMapsApiKey="AIzaSyCUh0USD6CGm6kmY1IOXj__DqFz5s12TP4"
          libraries={["visualization"]}
        &gt;
          &lt;div className="dasboard-analytics"&gt;
            &lt;Row className="match-height"&gt;
              &lt;Col xs="12"&gt;
                &lt;div style={{ height: "70vh", width: "100%" }}&gt;
                  &lt;GoogleMap
                    mapContainerStyle={containerStyle}
                    center={center}
                    zoom={4}
                  &gt;
                    &lt;HeatmapLayer
                      // optional
                      onLoad={onLoad}
                      // optional
                      onUnmount={onUnmount}
                      // required
                      data={[
                        new window.google.maps.LatLng(37.782, -122.447),
                        new window.google.maps.LatLng(37.782, -122.445),
                        new window.google.maps.LatLng(37.782, -122.443),
                        new window.google.maps.LatLng(37.782, -122.441),
                        new window.google.maps.LatLng(37.782, -122.439),
                        new window.google.maps.LatLng(37.782, -122.437),
                        new window.google.maps.LatLng(37.782, -122.435),
                        new window.google.maps.LatLng(37.785, -122.447),
                        new window.google.maps.LatLng(37.785, -122.445),
                        new window.google.maps.LatLng(37.785, -122.443),
                        new window.google.maps.LatLng(37.785, -122.441),
                        new window.google.maps.LatLng(37.785, -122.439),
                        new window.google.maps.LatLng(37.785, -122.437),
                        new window.google.maps.LatLng(37.785, -122.435),
                      ]}
                    /&gt;
                    &lt;Polygon onLoad={onLoad} paths={myPoly} options={options} /&gt;
                  &lt;/GoogleMap&gt;
                &lt;/div&gt;
              &lt;/Col&gt;
            &lt;/Row&gt;
          &lt;/div&gt;
        &lt;/LoadScript&gt;
      );
    }
  }
  
  export default ReactMaps;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>