Typescript support

[brettatoms]

No description provided.

[inouiw]

Basically, the TypeScript definition of createClient is nowhere to find. This makes it difficult to start with Node.js and TypeScript. All other google.maps definitions are available with npm install --save @types/google-maps

[anaganisk]

Any progress on this?

[sudharsanmit]

declare function require(path: string): any;
var googleMap = require('@google/maps');

This worked!!

[lukas-zech-software]

As this library wraps the API in own functions one cannot use the definitions from @types/googlemaps directly.

I started to write definitions for this wrapper which I use in my application.
See here: https://gist.github.com/lukas-zech-software/a7e4a23a6833ec1abb1fc836138f7822

Currently only the geocode API is implemented but I will add more if I need them.
The definitions can easily be extended following the geocode example

@stephenmcd
I would publish these definitions to DefinitelyTyped but this is currently not possibly for scoped packages

If you are willing to integrate them in the package, feel free to copy my gist. Or maybe link them in the ReadMe.md?

[merlosy]

Hi!
It seems to be working so far in my app (angular v4) with:

• npm install --save-dev @types/googlemaps
• Adding to all my tsconfig*.json : types: [ "googlemaps"]
• Adding at the top of my file: declare const google: any;
• Adding at the end of the body of my index.html:

<script async defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=****"></script>

However, It isn't recognized while running my unit tests (karma + jasmine) with Angular CLI.

Any help?
thx

[hnrchrdl]

@merlosy There is a tsconfig.spec.json, maybe you need to add types: [ "googlemaps"] there, too. It works in my case, thanks a lot.

[merlosy]

Hi @hnrchrdl , I did add it to my tsconfig.spec.json:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "module": "commonjs",
    "target": "es5",
    "baseUrl": "",
    "types": [
      "jasmine",
      "node",
      "googlemaps"
    ]
  },
  "files": [
    "test.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

And also randomly on reload I get a "google is not defined"

[hnrchrdl]

@merlosy 'google is not defined' could occur if you try to use access it before the dom is ready, especially when it happens randomly. Another possibility is browser addons (adblocker or something similar) are blocking scripts.

[dennypc]

In order to use the existing typings from @types/googlemaps I did the following in typescript:

import * as googleMaps from '@google/maps';
import { } from '@types/googlemaps';

This then allowed me to use the google.maps namespace along with making the createClient call.

googleMaps.createClient({
            key: '...',
        }).geocode(...);

Be warned that this project and the typings project have discrepancies as well. For example the GeocoderRequest object from the typings project has a different object structure.

[arthurvasconcelos]

@dennypc I tried your solution:

import * as googleMaps from '@google/maps';
import { } from '@types/googlemaps';

but I kept receiving this tslint error:

TS7016: Could not find a declaration file for module '@google/maps'. '···/node_modules/@google/maps/lib/index.js' implicitly has an 'any' type.
  Try `npm install @types/@google/maps` if it exists or add a new declaration (.d.ts) file containing `declare module '@google/maps';`

how can I fix this?

[trmaphi]

The scoped package of typescript is required to be named as
js package: @foo/bar -> typescript declaration package: @types/foo__bar.

[sofayam]

Hi guys, node.js and typescript user here. I am totally befuddled by the following:
import * as googleMaps from '@google/maps'; import { } from '@types/googlemaps';

Am I right in assuming that there are two competing and presumably incompatible javascript apis, one with typescript support and one without, and that I need to combine the two somehow.

I am used to npm install-ing a module and its @types counterpart and then just importing the module. However, if I just try to "import * as gmaps from 'googlemaps'" then I get:

File '/node_modules/@types/googlemaps/index.d.ts' is not a module.

And finally what on earth does "import {} from x" even do? I cannot find that syntax anywhere.

I would be really grateful for a pointer, because I feel like I am the only one in this film without a script at the moment.

[ethanresnick]

FYI, definitely typed now supports publishing types for scoped packages, so this should be possible

[michael-letcher]

@ethanresnick I've tried adding

"paths": { "@google/maps": ["googlemaps"] }

and my entire project just breaks.

Doing

import * as googleMaps from '@google/maps'; import { } from '@types/googlemaps';

VSCode has a minor note on it saying

[ts]
Could not find a declaration file for module '@google/maps'. '/Users/michael/projects/migration/access-one.angular-ssp/node_modules/@google/maps/lib/index.js' implicitly has an 'any' type.
Try npm install @types/google__maps if it exists or add a new declaration (.d.ts) file containing declare module 'google__maps';

[dicbrus]

@sofayam @dennypc

Have you found answer for your question?

And finally what on earth does "import {} from x" even do? I cannot find that syntax anywhere.

Trying do understand what does this empty import do, still found nothing about it...

[sofayam]

No, I just forgot about it. Revisiting the topic again now I thought to check what the transpiler emitted: nothing. So I am guessing it is some way of importing type information for the transpiler without influencing the emitted output. Typescript is pretty well established and gives me immense value every day but still seems to have some dusty corners. Maybe I should email Anders Hejlsberg :-)

[dicbrus]

@sofayam
thanks for the answer, still unclear. I should keep this line of code, but not really understand why it is needed

[bhushankumar-developer]

Facing the same problem.
Did anyone found a solution?

[dicbrus]

@bhushankumar-developer fortunately yes, I resolved it:
copying my answer from SO: https://stackoverflow.com/questions/36064697/how-to-install-typescript-typings-for-google-maps/42733315?noredirect=1#comment88303107_42733315

namespace definition could be imported by triple-slash directive
/// <reference path="..." />
It worked good for me, but I wanted to find some more elegant solution.

Another way to import it is to play with tsconfig.json file, in my case I edited "typeRoots" section.
After adjusting it the way that @types/googlemaps imported, I removed "empty" import and it works fine.
Seems to me, that this empty import do not import any classes, modules and so on, but only namespaces.

[indrimuska]

Finally I've completed to write the entire API typings for this project, in order to help any other poor TypeScript developer like me that is used to have types for everything :)

For any other typescript maniac, you can get the typings from both npm register, either github, just follow these links (sorry for any error I may have done, I've write it in just 3 days):

• npm: https://www.npmjs.com/package/google-maps-api-typings
• github: https://github.com/indrimuska/google-maps-api-typings

Any help or comment would be appreciated.
Thanks!

[codealvarez]

In Angular 6 is easy, It works for me:

• npm install --save-dev @types/googlemaps
• At the beggining of your component file, type:
  /// <reference types="@types/googlemaps" />

[indrimuska]

@codealvarez that package provides typings for JavaScript API / we're talking about the Node API

[evanshortiss]

@indrimuska looks like they now have a way to support this via underscores in the name for definitely typed. Might be worth looking to see about publishing? Great work

[devuxer]

@indrimuska ,

Glad I read this entire thread to stumble upon your typings library. Thank you for taking the time to do that! If you want to get more mileage from the work you did on this, though, you should really consider publishing it to DefinitelyTyped.

[alekseikurnosenko]

FYI, @indrimuska package is now available as part of DefinitelyTyped: @types/google__maps
(DefinitelyTyped/DefinitelyTyped#29625)

[Technosolnet]

Consider importing 'google-maps' instead of '@types/google-maps'

[HighSoftWare96]

I've solved the problem declaring the namespace in the top of the file, like this:
/// <reference path="../../../../../../node_modules/@types/googlemaps/index.d.ts"/>
and then do not import googlemaps anywhere.

[clementdevos]

I feel this #42 (comment) should be added to the main README... :)

Thanks for that !

[amak07]

@brettatoms can you please update your README with the accepted solutions here? Maybe add a 'typescript considerations' section? It's probably almost mandatory at this point for node.js repositories to include such information. Much appreciation on the client library. Thanks.

[brettatoms]

@amak07 I only created this issue. I don't have a README to update.

[arnold-almeida]

+1 for Typescript support to be added to the README via yarn add @types/google__maps --dev

[amuramoto]

Added this to the README in b1a82da

Thanks for contributing! =)

[grant]

Rather than installing the third-party @types/google__maps, could we instead use npm's native types declaration?

https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html

This way, we don't have to install both this package and the @types package and they could be kept more up-to-date. There are also lots of other benefits for TypeScript that could be included.

I'm happy to help convert if interested.
WDYT @jpoehnelt, @amuramoto?

[jpoehnelt]

@grant I'm going to reopen this and try to find time to convert to typescript. shouldn't take too long... hopefully 😄

[grant]

LMK if you need help 👍

[madhumynampati]

Did this. Worked pretty well

import { google } from 'google-maps';

[jpoehnelt]

TypeScript support is provided in @googlemaps/google-maps-services-js. There is a migration guide in the README.md as the API has changed from @google/maps.