TypeScript React Google Maps: 'google' does not exist

Question

I have loaded the google maps Javascript API in the public/index.html and in dev tools console I can log window.google.maps just fine.

But TypeScript doesn't know its there and I get this error Property 'google' does not exist on type 'Window & typeof globalThis'.ts(2339) How do I tell typescript it does exist?

import React, { useRef } from "react";

function Map() {
    const mapRef = useRef<HTMLDivElement>(null);
    const google = window.google;
//                          ^ Error: Property 'google' does not exist on type 'Window & typeof globalThis'
    const myLatlng = new google.maps.LatLng(-34.397, 150.644);
    const mapOptions = {
    zoom: 8,
    center: myLatlng,
    };
    const map = new google.maps.Map(mapRef.current, mapOptions);
  return (<div ref={mapRef}></div>);
}

export { Map };

Hey Bill, I have the same problem, could you please tell me how did you resolve the problem? I've tried the solution from @ritaj but it doesn't work. Thanks — PANKAJ NAROLA
– PANKAJ NAROLA, Commented Apr 10, 2020 at 20:00
it's still unresolved but I plan to look at google-map-react t see how they did it — Bill
– Bill, Commented Apr 11, 2020 at 2:05
What does your line in index.html look like for loading the script? FWIW, for Google Maps and basic React, if you're using node, try installing the typings from Definitely Typed: npm install --save[-dev] @types/googlemaps. Those helped me a lot in doing the actual typings. — tim.rohrer
– tim.rohrer, Commented Apr 29, 2020 at 22:51

Yilmaz · Accepted Answer · 2021-09-08 04:37:56Z

4

google recommends to have ts.config.json with this setting.

https://developers.google.com/maps/documentation/javascript/using-typescript

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

in the root of your project you have to create ts.config.json and add that property single property. this is how you create ts.config.json:

   npx tsc --init

edited Sep 8, 2021 at 4:37

answered Sep 21, 2020 at 3:11

Yilmaz

51k19 gold badges226 silver badges278 bronze badges

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

2 Comments

Earle Poole Over a year ago

This answer is what tipped me off the most to solving this issue for myself. According to Google's Map docs it says to install using npm i -D @types/google.maps I took @Yilmaz 's suggestion of adding a "types" property to my tsconfig file, but instead of googlemaps I used google.maps.. and suddenly my Typescript is picking up all of Google Maps' typings from DefinitelyTyped.

Yilmaz Over a year ago

@EarlePoole i think I made a typo :) thanks

tim.rohrer · Accepted Answer · 2020-08-27 18:13:23Z

3

I thought about this some more. If you have not installed the Google Map typings from DefinitelyTyped, I suggest doing so:

npm install --save @types/googlemaps. (Or --save-dev if you only want them for your own development.)

edited Aug 27, 2020 at 18:13

answered Apr 29, 2020 at 22:56

tim.rohrer

2954 silver badges13 bronze badges

2 Comments

mkabatek Over a year ago

I think you mean `'npm' not 'nom'

tim.rohrer Over a year ago

Corrected. Thank you. Autocorrect often does more damage than good, but my mistake in not catching the error.

Collectives™ on Stack Overflow

TypeScript React Google Maps: 'google' does not exist

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related