Angular2 Cannot find namespace 'google'

Question

I am working with angular2-google-maps and latest version of Angular2. I am trying to convert some of the local map component functions into services in their own file maps.service.ts. For example:

map.component.ts

getGeoLocation(lat: number, lng: number) {
if (navigator.geolocation) {
    let geocoder = new google.maps.Geocoder();
    let latlng = new google.maps.LatLng(lat, lng);
    let request = { latLng: latlng };
    geocoder.geocode(request, (results, status) => {
      if (status == google.maps.GeocoderStatus.OK) {
        let result = results[0];
        if (result != null) {
          this.fillInputs(result.formatted_address);
        } else {
          alert("No address available!");
        }
      }
    });
}
}

Into something like: maps.service.ts

getGeoLocation(lat: number, lng: number): Observable<google.maps.GeocoderResult[]> {
    let geocoder = new google.maps.Geocoder();
    let latlng = new google.maps.LatLng(lat, lng);
    let request = { latLng: latlng };
    return new Observable((observer: Observer<google.maps.GeocoderResult[]>) => {
        geocoder.geocode({ request }, (
            (results: google.maps.GeocoderResult[], status: google.maps.GeocoderStatus) => {
                if (status == google.maps.GeocoderStatus.OK) {
                    observer.next(results);
                    observer.complete();
                } else {
                    console.log('Geocoding service failed due to: ' +status);
                    observer.error(status);
                }
            }
        ));
    });
}

The issue I'm getting is that google variable is not being recognized when I try to use Observer<google.maps.GeocoderResult[]>. I have declare var google: any; outside of the service class as well.

The google variable works in my map.componenet.ts but doesn't get recognized in the maps.service.ts.

@GünterZöchbauer Within AppModule: ` AgmCoreModule.forRoot({ apiKey: '--key--', libraries: ['places'] })` — Milo, Feb 22 '17 at 14:51
You need a TypeScript import as well that provides `google`. Seems you copied the code from somewhere. Can you please post a link? — Günter Zöchbauer, Feb 22 '17 at 14:51
I have added ` ` and tried adding the google-maps typings globally as well. — Milo, Feb 22 '17 at 14:53
`AgmCoreModule` doesn't seem to provide anything related to `Geocoder` — Günter Zöchbauer, Feb 22 '17 at 14:56

score 109 · Accepted Answer · edited Nov 22 '22 at 20:44

109

Angular 6 & 7 steps (should also work for every other Angular version):

npm install @types/googlemaps --save-dev
Add googlemaps to the types array in both filestsconfig.app.json respectively in tsconfig.spec.json (save both files)
At the top of your controller.ts

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

Restart npm server

The types array should look like these in both files

{ 
    "compilerOptions": { 
        "types": ["googlemaps","othertype",...]
    }
}

You can delete both declaration types from the components: import {} from '@types/googlemaps'; declare var google: any; You don't have to include any of them.

PS: If you are using agm-s GoogleMapsAPIWrapper.getNativeMap() you must convert the map object before you use it. For example turning on the traffic layer:

this.apiWrapper.getNativeMap().then(map => {
    this.trafficLayer = new google.maps.TrafficLayer();
    const gMap: any = map;
    this.trafficLayer.setMap(gMap as google.maps.Map);
});

edited Nov 22 '22 at 20:44

Mauricio Gracia Gutierrez

10,288
6
68
99

answered Sep 06 '18 at 08:49

Zsolt Tolvaly

3,528
4
26
25

2

Dammit I am still getting `error TS2503: Cannot find namespace 'google'.` I just need to add `"compilerOptions": { "types": ["googlemaps"]}`, right? Does not work for me .. :/ – Stefan Falk Sep 16 '18 at 14:14
Alright I had to restart `ng server` then it worked! – Stefan Falk Sep 16 '18 at 14:18
1

I found that I also had to move my Google Maps – Steve Perkins Oct 19 '18 at 15:18
Worked for angular 5 too! – Valentino Pereira Oct 27 '18 at 07:04
Working on Angular 7 here. Thank you! – Ionel Lupu Dec 22 '18 at 14:50
Using Angular 8. Works for me! Thanks – ctrleffive Aug 26 '19 at 09:17
why do I have to add to types in .spec and .app, if I already added in typeroots? – f.khantsis Dec 29 '19 at 17:24
I'm using google pay and this solution worked for me in vue as well. thanks. – David Bell Feb 18 '20 at 21:23
6

2022: The package has a dot it is `@types/google.maps` and in the compilerOptions should be `"types": ["google.maps"]}` – Ali Sep 14 '22 at 16:45
1

@Ali thanks for your live saver comment, I have updated the answer – Mauricio Gracia Gutierrez Nov 22 '22 at 19:05

score 61 · Answer 2 · edited Mar 10 '18 at 15:19

61

I was facing the same problem I tried :

declare var google: any;

But it didn't work for me .
I found this answer and it worked for me .
First make sure you installed the typings for google maps
npm install @types/googlemaps --save --dev

--dev flag is deprecated. Use npm install @types/googlemaps --save-dev

And Then in your Controller

import {} from '@types/googlemaps';

edited Mar 10 '18 at 15:19

Community

1
1

answered May 31 '17 at 08:07

Ayman Sharaf

889
2
10
18

1

This worked for me...just want to add that in Angular 2, I added `import {} from '@types/googlemaps';` to the same file after `import { NguiMapModule} from '@ngui/map';` in my shared.module.ts. – newman Jul 23 '17 at 14:42
1

It seems like Typescript linting doesn't like `import {} from '@types/googlemaps';` anymore, but suggests: `import { } from 'googlemaps'` – AJ Zane Apr 24 '18 at 00:13
1

can somebody explain (or even better to drive me to ts doc page) about this "empty" import. Nevertheless it works it looks like unused import. Wondered why does this help... – DicBrus May 31 '18 at 11:30

score 20 · Answer 3 · edited Aug 22 '18 at 21:18

20

To prevent more suffering of anyone else with this issue.

npm install @google/maps

https://www.npmjs.com/package/@google/maps

THEN:

import { google } from '@google/maps';

Basically we're importing the google object from the package @google/maps.

Tested in 2018 after @types/googlemaps stopped working.

edited Aug 22 '18 at 21:18

Milo

3,365
9
30
44

answered Jul 03 '18 at 10:14

clse

648
1
7
10

3

Note: I had to use `declare var google: any` in conjunction with this technique. – Milo Oct 19 '18 at 17:33
Worked for me without any `declare var google: any` – Pankaj Prakash Jan 12 '20 at 11:22
1

looks like that package is now deprecated, replaced by `@googlemaps/google-maps-services-js` – Gavin Haynes Jul 26 '20 at 04:01
I had to add "declare var google: any;" to make it work. – Mekey Salaria Jul 12 '21 at 12:38
The `@googlemaps/google-maps-services-js` is ment to be use in `node.js` and shouldn't be use on the client side, as mentioned [here](https://www.npmjs.com/package/@googlemaps/google-maps-services-js) – Raphaël Balet Jul 24 '22 at 13:16

score 13 · Answer 4 · answered Feb 22 '17 at 14:58

13

Add

declare var google: any;

after the TypeScript imports

See also https://github.com/SebastianM/angular2-google-maps/issues/689

answered Feb 22 '17 at 14:58

Günter Zöchbauer

623,577
216
2,003
1,567

1

worked in Angular 14 – Abdelrahman Gobarah Dec 03 '22 at 13:24

makkasi · Answer 5 · 2021-06-24T12:32:17.320

ERROR: [ts] Cannot import type declaration files. Consider importing ‘googlemaps’ instead of ‘@types/googlemaps’

solution: change import {} from ‘@types/googlemaps’; for

/// <reference types=”@types/googlemaps” />

ERROR: while compiling, error TS2304: Cannot find name ‘google’.

solution: add declare var google: any; below @types/googlemaps reference

ERROR: while compiling error TS2503: Cannot find namespace ‘google’.

solution: Add to tsconfig.app.json : "types": ["googlemaps"] and restart

ERROR: map doesn’t load correctly and in the web browser console you read “Google Maps Javascript API Warning: NoApiKeys”

solution: add a valid api key inside the javascript file in index.html, should look like this <script type=”text/javascript” src=”http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE"></script> you can get an API key from here https://developers.google.com/maps/documentation/javascript/get-api-key

ERROR:Cannot find name 'google'

Well, this is in case you just installed the types with:

npm i -D @types/google.maps

and you tried to used them. Sometimes in tsconfig.app.json there is empty type array, which prevents the automatic import. Remove "types": [] and could work. It worked for me once.

good answer for showing all the possibilities including the one that fixed it for me - tsconfig.app.json, which also avoided installing @google/maps — wlf, May 24 '20 at 22:54
Don't forget to restart your dev environment. I've found that is necessary to get the reference seen. — tim.rohrer, Sep 27 '20 at 13:54

score 4 · Answer 6 · edited Feb 20 '19 at 14:12

4

In my case I was getting 2 types of errors:

Cannot find namespace google
Cannot find name google

Since in my code I am using:

let autocomplete = new google.maps.places.Autocomplete(...)

let place: google.maps.places.PlaceResult = autocomplete.getPlace();

So fixed it by adding this:

declare var google: any;

declare namespace google.maps.places {
    export interface PlaceResult { geometry }
}

edited Feb 20 '19 at 14:12

Milo

3,365
9
30
44

answered Feb 19 '19 at 23:12

odiaz

241
2
3

I just had types = ["google.maps"] in my tsconfig.app.json and all was working fine until I tried to add prerendering via Universal: the SSR server would not build with the error `Cannot find namespace 'google'.`. This fix worked for me, I just had to modify the namespace declaration to include the functions I'm using, ie; ```declare namespace google.maps.places {export interface Autocomplete { getPlace }}``` in one file and ```declare namespace google.maps.places { export interface ComponentRestrictions { country }}``` in another. – momargoh Apr 15 '22 at 18:07

score 4 · Answer 7 · answered Feb 18 '22 at 01:42

4

Install reference

npm i -D @types/google.maps

Add this line at the beginning (meaning line 1, with nothing before) of your Typescript file :

/// <reference types="@types/google.maps" />

Triple Slash Documentation

Source

answered Feb 18 '22 at 01:42

Garvit Jain

1,862
2
19
27

score 3 · Answer 8 · edited Dec 12 '17 at 15:42

3

It is working for me also:

First install the typings for google maps in cmd on root of project

npm install @types/googlemaps --save --dev

And then add in your .ts component file below:

import {} from '@types/googlemaps';

edited Dec 12 '17 at 15:42

Milo

3,365
9
30
44

answered Dec 12 '17 at 05:31

Gauravbhai Daxini

2,032
2
22
28

score 3 · Answer 9 · edited Jul 26 '18 at 11:23

3

I have a similar problem with Angular 6, and I did all the possible solutions mentioned above but no luck. Finally, I manage to solve this problem by adding googlemaps into types inside tsconfig.app and tsconfig.spec files. Hope it helps for others.

edited Jul 26 '18 at 11:23

Łukasz Wojciechowski

926
6
20

answered Jul 26 '18 at 10:07

chaendler

61
2

score 2 · Answer 10 · answered Jul 26 '22 at 12:57

2

What worked for me was

npm install --save-dev @types/googlemaps

and then at the very top of your .ts page add this

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

answered Jul 26 '22 at 12:57

Ruan

3,969
10
60
87

score 1 · Answer 11 · answered Jun 13 '20 at 18:23

1

Straight solution, Add "googlemaps" to types array in tsconfig.app.json. And I didnt need to declare anything like, declare var google: any;. Just adding googlemaps in tsconfig works.

"types": ["googlemaps"]

answered Jun 13 '20 at 18:23

Mohsin Younas

324
4
12

1

Simplest and best working advise here. – Øystein Amundsen Jul 01 '22 at 11:44

score 0 · Answer 12 · answered Feb 08 '21 at 12:28

0

If anyone is struggling with this because Webstorm undescores the code even after installing types and adding them to tsconfig... restart the Webstorm. It took me an hour.

answered Feb 08 '21 at 12:28

Tukkan

1,574
2
18
33

score 0 · Answer 13 · answered Sep 01 '21 at 17:45

Noting solved the problem for me. After following the top rated answer still didn't worked only worked after adding this

npm i @types/googlemaps@3.39.13 --save-dev

make sure you run this before ng serve and make sure to restart the server if its running.

score -1 · Answer 14 · answered May 03 '19 at 16:24

`
import { Observable } from 'rxjs';
import { GoogleMapsAPIWrapper, MapsAPILoader } from '@agm/core';
import { Injectable, NgZone } from '@angular/core';
declare var google: any;

@Injectable({
  providedIn: 'root'
})
export class MapService extends GoogleMapsAPIWrapper {
  geocoder: Promise<any>;
  constructor(private __loader: MapsAPILoader, private __zone: NgZone) {
    super(__loader, __zone);
    this.geocoder = this.__loader.load().then(() => new google.maps.Geocoder());
  }

  getLatLan(address: string): Observable<any> {
    return Observable.create(observer => {
      this.geocoder.then((geocoder) => {
        geocoder.geocode({ 'address': address }, (results, status) => {
          if (status === google.maps.GeocoderStatus.OK) {
            observer.next(results[0].geometry.location);
            observer.complete();
          } else {
            console.error('Error - ', results, ' & Status - ', status);
            observer.next({});
            observer.complete();
          }
        });
      });
    });
  }
}`

This is a service with a method to get the address and return lan and lat.

Angular2 Cannot find namespace 'google'

14 Answers14

Angular 6 & 7 steps (should also work for every other Angular version):

Linked