react-google-maps “谷歌未定义”

Question

I'm using the react-google-maps in one of my react projects. But I'm getting this error:

google is not defined

I've tried several other solutions from stack-overflow but none worked for me. Here's my code:

/* global google */
import React, { useState } from 'react'
import { GoogleMap, Marker, InfoWindow, HeatmapLayer, LoadScript } from '@react-google-maps/api';
import { markerPosition } from "./MapData";
... // other code

const ExampleTraffic = (props) => {

 ... // other code

  return (
    <LoadScript
      id="script-loader"
      googleMapsApiKey="My Api Key"
      region="BD"
      libraries={libraries}
    >
      <GoogleMap
        id='example-map'
        mapContainerStyle={{ height: "100vh", width: "100vw" }}
        zoom={13}
        center={{
          lat: 23.684994,
          lng: 90.356331
        }}
        clickableIcons={true}
      >
        ... // other code

        <HeatmapLayer data={[
                new google.maps.LatLng(22.862257, 22.862257),
                new google.maps.LatLng(22.853746, 89.534611),
                new google.maps.LatLng(22.847735, 89.537359),
                new google.maps.LatLng(22.845773, 89.551920),
                new google.maps.LatLng(22.861434, 89.534056),
                new google.maps.LatLng(22.864945, 89.514299),
                new google.maps.LatLng(22.868741, 89.527406),
                new google.maps.LatLng(22.866369, 89.528873),
                new google.maps.LatLng(22.857052, 89.547997),
                new google.maps.LatLng(22.845172, 89.530171),
                new google.maps.LatLng(22.854094, 89.562946),
                new google.maps.LatLng(22.868963, 89.507291),
                new google.maps.LatLng(22.871177, 89.547143),
                new google.maps.LatLng(22.897430, 89.513818)
         ]}
         />
      </GoogleMap>
    </LoadScript >
  );
}

export default ExampleTraffic;

What's wrong with my code? Any help would be highly appreciated.

Answer 1

The issue was resolved by using

new window.google.maps.LatLng(22.862257, 22.862257),
new window.google.maps.LatLng(22.853746, 89.534611),

Instead of

new google.maps.LatLng(22.862257, 22.862257),
new google.maps.LatLng(22.853746, 89.534611),