react-google-maps: Cannot find namespace 'google'

Question

I am trying to use this library "react-google-maps" to display google maps in my application. After having followed the tutorial from their github page, I get this error on first run (this is a create-react-app + typescript application) :

I am kind of lost here. As any one used this library before? Here is my code:

import * as React from 'react';
import { GoogleMap, Marker, withGoogleMap, withScriptjs } from 'react-google-maps';
import { compose, withProps } from 'recompose';

const TerrMap: React.StatelessComponent<{
    isMarkerShown: boolean
}> = compose(
    withProps({
        googleMapURL: "https://maps.googleapis.com/maps/api/js?key=__my_api_key__&v=3.exp&libraries=geometry,drawing,places",
        loadingElement: <div style={{ height: `100%` }} />,
        containerElement: <div style={{ height: `400px` }} />,
        mapElement: <div style={{ height: `100%` }} />,
      }),
      withScriptjs,
      withGoogleMap
)( (props: any) => {

    return (
        <GoogleMap
            defaultZoom={8}
            defaultCenter={{ lat: -34.397, lng: 150.644 }}
        >
            {props.isMarkerShown && <Marker position={{ lat: -34.397, lng: 150.644 }} />}
        </GoogleMap>
    );
} ) as any;

Add a code snippet instead of a screenshot

Shubham Khatri
– Shubham Khatri

2018-02-13 17:04:21 +00:00
Commented Feb 13, 2018 at 17:04 — Shubham Khatri
– Shubham Khatri, Commented Feb 13, 2018 at 17:04
Was this ever answered?

foxtrotuniform6969
– foxtrotuniform6969

2018-05-26 18:23:35 +00:00
Commented May 26, 2018 at 18:23 — foxtrotuniform6969
– foxtrotuniform6969, Commented May 26, 2018 at 18:23

Harrison · Accepted Answer · 2024-03-11 10:43:05Z

17

If this hasn't been answered yet. Here is how to fix this.

Add these two typing "@types/googlemaps" and "@types/markerclustererplus"
Make sure that you include these types in for project. You can do that different ways, but the easiest would be to add these two types in your tsconfig.json file like this.

Sample:

    {
        "compilerOptions":{
            ...,
            "types":[
                ...
                "googlemaps",
                "markerclustererplus"
            ] 
        }
    }

This should solve your issue.

2024 Update

Type namespace has changed for google.maps "@types/googlemaps" to "@types/google.maps"

So, the types to be included in tsconfig.json should look like this (I didn't even have to include "markerclustererplus"):

    {
        "compilerOptions":{
            ...,
            "types":[
                ...
                "google.maps",
                "markerclustererplus"
            ] 
        }
    }

edited Mar 11, 2024 at 10:43

Harrison

2,49512 gold badges24 silver badges48 bronze badges

answered Jul 4, 2018 at 7:45

amuz

3642 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Limbo Over a year ago

This should be marked as answer. Worked for me, thank you!

xaphod Over a year ago

2021: i had to add "google.maps" not "googlemaps"

Samuel Over a year ago

+1 to @xaphod. The @types/googlemaps has been renamed to @types/google.maps (with the dot). Therefore in the types array you also need to type it with the dot.

Alexandru Ionuţ Bujor Over a year ago

Yes, this workes with @vis.gl/react-google-maps also

FPast · Accepted Answer · 2018-02-13 20:15:31Z

3

You have to add this notation at the top of the file

/*global google*/

I hope it works for you

answered Feb 13, 2018 at 20:15

FPast

792 bronze badges

Comments

hbrade · Accepted Answer · 2020-12-15 06:10:28Z

3

If you are using typescript you have to install:

npm install --save-dev @types/googlemaps

A better description can be found here: react-google-maps-cannot-find-namespace-google

answered Dec 15, 2020 at 6:10

hbrade

1471 silver badge3 bronze badges

Comments

n1koloza · Accepted Answer · 2024-03-07 10:23:45Z

0

add to eslint config:

"globals": {
        "google": "readonly",
    }

answered Mar 7, 2024 at 10:23

n1koloza

1,23510 silver badges13 bronze badges

Collectives™ on Stack Overflow

react-google-maps: Cannot find namespace 'google'

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related