Google Maps Places Typescript: Cannot find Namespace 'google'

[seanaye]

Environment details

Package manager: yarn 1.22.4
@googlemaps/js-api-loader: "^1.2.0"
ts config:

{
  "extends": "@quasar/app/tsconfig-preset",
  "compilerOptions": {
    "target": "ES5",
    "lib": [
      "ES2019", "DOM"
    ],
    "baseUrl": ".",
    "experimentalDecorators": true,
    "importHelpers": true,
    "skipLibCheck": true,
    "typeRoots": [
      "node_modules/@types",
      "src/types"
    ],
    ...
}

Steps to reproduce

1. Migrating from google-maps package

Code example

import { Loader, LoaderOptions, } from '@googlemaps/js-api-loader'
import { ref } from '@vue/composition-api'

const opts: LoaderOptions = {
  libraries: ['places'],
  apiKey: 'MY_API_KEYI'
}

const loader = new Loader(opts)

const loaded = ref(false)

const autocompleteObject = ref<google.maps.places.AutocompleteService|null>(null)
const placeDetailsObject = ref<google.maps.places.PlacesService|null>(null)

results in

Cannot find namespace 'google'.ts(2503)

EDIT:

Should mention that in google-maps package my import statement had

import { Loader, LoaderOptions, google } from 'google-maps'

this is removed because

node_modules/@googlemaps/js-api-loader/dist"' has no exported member 'google'

[jpoehnelt]

There might be a couple issues here:

1. Instantiating the loader is not enough. There needs to be a call to load that returns a promise. See below with an await.

const loader = new Loader(opts);
await loader.load();

2. The typings for Google Maps JavaScript API are in the npm i -D @types/googlemaps package. See https://developers.google.com/maps/documentation/javascript/using-typescript

[seanaye]

Thanks for reply.

I was already doing the first, here is more code.

  const loader = new Loader(opts)

  async function initGoogle () {
    console.log('attempting load')
      try {
        await loader.load()
      } catch (e) {
        console.log({ e })
      }
    }

    if (loadAutocomplete && !autocompleteObject.value) {
      autocompleteObject.value = new google.maps.places.AutocompleteService()
    }

    if (loadDetails && !placeDetailsObject.value) {
      // pass in random div
      placeDetailsObject.value = new google.maps.places.PlacesService(div)
    }
  }

I just installed the @types package but typescript linter is saying namespace google 'google' is not defined.eslintno-undef Cannot find namespace 'google'.ts(2503) where ever i reference the google namespace

[seanaye]

Fixed by manually adding the types package to tsconfig

[darrylsepeda]

@seanaye any example on the types package to tsconfig?

@types/googlemap also deprecated and replaced by @types/google.map?

[kurtiev]

@darrylsepeda I added in tsconfig.app.json in my Angular app and it works fine.

...
  "compilerOptions": {
    "types": [
      "@types/google.maps"
    ]
  },
...