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;

Answer 1

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

1. Add these two typing "@types/googlemaps" and "@types/markerclustererplus"
2. 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.

-

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

This should solve your issue.

Answer 2

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

Answer 3

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

/*global google*/

I hope it works for you