How to install Typescript typings for google maps

Question

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

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

and end up with variations o

Answer 1

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

Answer 2

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"
   ],
   ...
}

Answer 3

typings install google.maps --global

You need the --global (used to be --ambient) flag to search DefinitlyTyped

Answer 4

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

Answer 5

As of now the correct way to install is:

typings install dt~google.maps --global [--save]

Answer 6

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" />