How to install Typescript typings for google maps

by

So what makes this exceptional is that the maps script needs to be downloaded separately from your app bundle. It’s not your typical npm install where you get your .js and .ts nicely packaged for consumption.

TLDR: the typings can be installed via npm but the .js script must be downloaded via a <script> tag (for SPAs this tag can be appended to your web page on-the-fly to improve initial load time of your app, which is what I do).

My recommended path is as follows:

Install

npm install --save-dev @types/googlemaps

Import

import {} from 'googlemaps';

Load & Use (this function makes sure the maps script is only appended to the page once, so that it can be called over and over)

addMapsScript() {
  if (!document.querySelectorAll(`[src="${googleMapsUrl}"]`).length) { 
    document.body.appendChild(Object.assign(
      document.createElement('script'), {
        type: 'text/javascript',
        src: googleMapsUrl,
        onload: () => doMapInitLogic()
      }));
  } else {
    this.doMapInitLogic();
  }
}

Remember, the maps script must be appended to the page and the script must be downloaded before anything else happens. If you’re using Angular, for example, I wrap the addMapsScript() logic in an observable and put in my map components route resolver.

Use the types (Type definitions include, but are not limited to):

const mapRef: google.maps.Map;
const bounds: google.maps.LatLngBounds;
const latLng: google.maps.LatLng;

Get Rid of the warning:@types/googlemaps/index.d.ts' is not a module.

Add a file at your projects root directory called index.d.ts and insert the following:

declare module 'googlemaps';

Update 01.06.2018 (findings of @DicBrus):

In order to import google namespaces and get rid of annoying error “Cannot find namespace ‘google'” you should ensure that you’ve imported namespace definitions in @types/googlemaps

There are two ways to do it:

  1. triple-slash directive

    /// /node_modules/@types/googlemaps/index.d.ts” />
    Worked fine, but not so elegant.

Documentation could be found here: https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

  1. Ensure that it is imported in tsconfig.json and since it is imported you do not need to import something additionally

Detailed manual is here: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

you should check two subsections under compilerOptions:
typeRoots and types

By default all type definitions under node_modules/@types are imported unless you specified exactly what you need.

In my particular case I had following section:

"types": []

It disables automatic inclusion of @types packages.

Removing this line re-solved issue for me, as well also adding triple-slash directive helped. But I chose the second solution.

As for the “empty” import, I didn’t found any explanation how and why it works. I suppose that it does NOT import any module or class, but it does import namespaces. This solution is not suitable for me, since IDE marks this import as “not used” and it can be easily removed. E.g, webstorm’s command Ctrl+Alt+O – prettifies code and removes all unnecessary imports.

More Related Contents:

  1. How to define Typescript type as a dictionary of strings but with one numeric “id” property
  2. How to suppress “error TS2533: Object is possibly ‘null’ or ‘undefined'”?
  3. Why does A | B allow a combination of both, and how can I prevent it?
  4. How to return value from function which has Observable subscription inside?
  5. Typescript Discriminated Union allows invalid state
  6. Why can’t I return a generic ‘T’ to satisfy a Partial?
  7. Parameters generic of overloaded function doesn’t contain all options
  8. Enforcing the type of the indexed members of a Typescript object?
  9. Constructor overload in TypeScript
  10. What does ‘declare’ do in ‘export declare class Actions’?
  11. Typescript: Can I define an n-length tuple type?
  12. How do I find an array item with TypeScript? (a modern, easier way)
  13. Angular 2 2.0.0-rc.1 Property ‘map’ does not exist on type ‘Observable’ not the same as issue report
  14. What is target in tsconfig.json for?
  15. ES7 Object.entries() in TypeScript not working
  16. ‘Property does not exist on type ‘never’
  17. Typescript type T or function () => T usage
  18. TypeScript sorting an array
  19. “An index signature parameter type cannot be a union type.” – what should I use instead?
  20. Typescript and spread operator?
  21. Detailed differences between type annotation `variable: type` and type assertion `expression as type` in TypeScript
  22. Generic and typeof T in the parameters
  23. Angular 2 loader on each http request
  24. Typescript: type narrowing not working for `in` when key is stored in a variable
  25. Run factory function on import in TypeScript?
  26. How to make “handler” lookup for “dispatcher” style function be typed correctly
  27. How do I decide whether @types/* goes into `dependencies` or `devDependencies`?
  28. How to define an interface for objects with dynamic keys?
  29. Types from both keys and values of object in Typescript
  30. Modules vs. Namespaces: What is the correct way to organize a large typescript project?

Leave a Comment