react-google-maps "google is not defined"

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.

if you want to use ```window.google``` you have to add a script tag of google api in the ```index.html``` in public folder. But in case you have already defined the google api in ```LoadScript```. If you would tell me, exactly what you want to do, I may help you with using google — Umair Riaz, May 06 '20 at 07:53
use ```{lat: 37.782, lng: -122.447, weight: 0.5}, {lat: 37.782, lng: -122.443, weight: 2}, {lat: 37.782, lng: -122.441, weight: 3}, {lat: 37.782, lng: -122.439, weight: 2}, {lat: 37.782, lng: -122.435, weight: 0.5}, {lat: 37.785, lng: -122.447, weight: 3}, {lat: 37.785, lng: -122.445, weight: 2}, {lat: 37.785, lng: -122.441, weight: 0.5}, {lat: 37.785, lng: -122.437, weight: 2}, {lat: 37.785, lng: -122.435, weight: 3}``` formate as the props in data of `````` — Umair Riaz, May 06 '20 at 08:03

score 0 · Accepted Answer · answered May 22 '20 at 05:57

0

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),

answered May 22 '20 at 05:57

Arfizur Rahman

384
4
13

react-google-maps "google is not defined"

1 Answers1