How to install Typescript typings for google maps

user_1923190 0
Viewed 96240

How can it be done - I've tried combinations of

typings install [googlemaps | google.maps] [--ambient] --save

and end up with variations on this error

typings ERR! message Unable to find "googlemaps" for "npm" in the registry.

Per Amy's suggestion, I've also download to the relevant directory and added 

/// <reference path="main/ambient/google.maps/google.maps.d.ts" />

to my main.d.ts (a file which is clearly being read as I don't get other errors).

And I can't find anything on the web to answer the question

My end goal is to get rid of this sort of error

error TS2503: Cannot find namespace 'google'.

typescript
14 Answers

I struggled to define the google object on the window, finally found a good way, by extending Window interface.

Just create a google-maps.d.ts file with this:

import '@types/googlemaps';

declare global {
  interface Window {
    google: typeof google;
  }
}

And add it to a directory called types at your root folder. Then point to this folder in your tsconfig.json file.

// tsconfig.json
compilerOptions: {
   ...
   "typeRoots": [
     "node_modules/@types",
     "types"
   ],
   ...
}
user_65393170

My solution (works for Vue2.x):

Install 

npm install --save @types/googlemaps

Add script to index.html

<script src="https://maps.googleapis.com/maps/api/js?key=XXX&libraries=YYYY"></script>

Create in root folder types/index.d.ts

Put here the next lines:

/// <reference path="../node_modules/@types/googlemaps/index.d.ts" />
declare module 'googlemaps';

Open tsconfig.json and add "types/*.d.ts" to your "include" array.

  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx",
    "types/**/*.d.ts"
  ],
user_59321650

The easyest way is use a triple-slash directive. Fortunately, there's an alternative syntax available which takes advantage of the standard package resolution:

 /// <reference types="googlemaps" />
user_89086390

Stephen Paul clearly explains everything, but there is something important to mention. tsconfigs can extend each other. And extended one can overwrite the parent one. In my case I had another tsconfig.app.json under app directory which has 

types: []

arrays. As Stephen already explained this empty array overrides typeRoots. So just remove all types arrays in ALL related tsconfig files and ensure that 

"typeRoots": ["node_modules/@types"]

is present. Needless to say that @types@googlemaps must be installed

user_95902510

For users of Angular9+ I would STRONGLY recommend using their official component

Step 1: Installation:

npm install --save-dev @angular/google-maps

Step 2: Registration

@NgModule({
  imports: [
    GoogleMapsModule
  ]
})
export class AppModule { }

Step 3: Implementation

<google-map [center]="center" [options]="options"></google-map>

center = new google.maps.LatLng(-30.5595, 22.9375);
options: google.maps.MapOptions = {
  mapTypeId: 'hybrid',
};

See https://medium.com/angular-in-depth/google-maps-is-now-an-angular-component-821ec61d2a0 for a more detailed guide

user_10871310

Well I have tried all the above without success in my angular 11 project, finally the official typing from google solved my issue :

npm install --save @types/google.maps
user_34146620
user_51084750

The new @types/google__maps works perfectly for us. The original one(@types/googlemaps) was tricky and has many browser dependencies(like HTMLElement) which would fail the TS compiling if you use it in a nodejs environment.

npm install @types/google__maps -D

So we have googlemaps, google-maps, and google__maps in DefinitelyTyped. The difference are explained below: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/29625#issuecomment-429207839

user_14867420
Related