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
– Milo, Commented Feb 22, 2017 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
– Günter Zöchbauer, Commented Feb 22, 2017 at 14:51
I have added ` <script src="gstatic.com/charts/loader.js"></script> <script type="text/javascript" src="google.com/jsapi"></script>` and tried adding the google-maps typings globally as well. — Milo
– Milo, Commented Feb 22, 2017 at 14:53
AgmCoreModule doesn't seem to provide anything related to Geocoder — Günter Zöchbauer
– Günter Zöchbauer, Commented Feb 22, 2017 at 14:56

Mauricio Gracia Gutierrez · Accepted Answer · 2022-11-22 20:44:15Z

116

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, 2022 at 20:44

Mauricio Gracia Gutierrez

11k7 gold badges81 silver badges115 bronze badges

answered Sep 6, 2018 at 8:49

Zsolt Tolvaly

3,6264 gold badges29 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Stefan Falk Over a year ago

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 Over a year ago

Alright I had to restart ng server then it worked!

Steve Perkins Over a year ago

I found that I also had to move my Google Maps <script> tag from within my component into index.html's <head>. Until I did this no solutions worked for me.

Ali Over a year ago

2022: The package has a dot it is @types/google.maps and in the compilerOptions should be "types": ["google.maps"]}

Mauricio Gracia Gutierrez Over a year ago

@Ali thanks for your live saver comment, I have updated the answer

|

Community · Accepted Answer · 2018-03-10 15:19:40Z

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, 2018 at 15:19

CommunityBot

11 silver badge

answered May 31, 2017 at 8:07

Ayman Sharaf

9192 gold badges10 silver badges19 bronze badges

3 Comments

newman Over a year ago

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.

AJ Zane Over a year ago

It seems like Typescript linting doesn't like import {} from '@types/googlemaps'; anymore, but suggests: import { } from 'googlemaps'

DicBrus Over a year ago

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...

Milo · Accepted Answer · 2018-08-22 21:18:44Z

21

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, 2018 at 21:18

Milo

3,4539 gold badges32 silver badges44 bronze badges

answered Jul 3, 2018 at 10:14

clse

7741 gold badge7 silver badges11 bronze badges

5 Comments

Milo Over a year ago

Note: I had to use declare var google: any in conjunction with this technique.

Pankaj Prakash Over a year ago

Worked for me without any declare var google: any

Gavin Haynes Over a year ago

looks like that package is now deprecated, replaced by @googlemaps/google-maps-services-js

Mekey Salaria Over a year ago

I had to add "declare var google: any;" to make it work.

Raphaël Balet Over a year ago

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

Günter Zöchbauer · Accepted Answer · 2017-02-22 14:58:03Z

13

Add

declare var google: any;

after the TypeScript imports

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

answered Feb 22, 2017 at 14:58

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

1 Comment

Abdelrahman Gobarah Over a year ago

worked in Angular 14

makkasi · Accepted Answer · 2021-06-24 12:32:17Z

11

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.

edited Jun 24, 2021 at 12:32

answered Oct 23, 2019 at 12:09

makkasi

7,3774 gold badges49 silver badges65 bronze badges

2 Comments

wlf Over a year ago

good answer for showing all the possibilities including the one that fixed it for me - tsconfig.app.json, which also avoided installing @google/maps

tim.rohrer Over a year ago

Don't forget to restart your dev environment. I've found that is necessary to get the reference seen.

Garvit Jain · Accepted Answer · 2022-02-18 01:42:48Z

8

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, 2022 at 1:42

Garvit Jain

2,0622 gold badges25 silver badges30 bronze badges

1 Comment

Harsh Patel Jul 15 at 6:01

If anyone implementing Google Identity Services (Signin with Google API) and If getting error TS2304: Cannot find name 'google'. then just install npm install --save-dev @types/google.accounts and then add following line in your ts file /// <reference types="@types/google.accounts" />

Łukasz Wojciechowski · Accepted Answer · 2018-07-26 11:23:08Z

4

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, 2018 at 11:23

Łukasz Wojciechowski

9366 silver badges20 bronze badges

answered Jul 26, 2018 at 10:07

chaendler

1011 silver badge2 bronze badges

Comments

Milo · Accepted Answer · 2019-02-20 14:12:21Z

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, 2019 at 14:12

Milo

3,4539 gold badges32 silver badges44 bronze badges

answered Feb 19, 2019 at 23:12

odiaz

2512 silver badges3 bronze badges

1 Comment

momargoh Over a year ago

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.

Milo · Accepted Answer · 2017-12-12 15:42:03Z

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, 2017 at 15:42

Milo

3,4539 gold badges32 silver badges44 bronze badges

answered Dec 12, 2017 at 5:31

Gauravbhai Daxini

2,2002 gold badges26 silver badges29 bronze badges

Comments

Mohsin Younas · Accepted Answer · 2020-06-13 18:23:03Z

2

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, 2020 at 18:23

Mohsin Younas

3745 silver badges13 bronze badges

2 Comments

Øystein Amundsen Over a year ago

Simplest and best working advise here.

Guillaume Mar 21 at 12:09

I believe it is "google.maps". But you need to have the types first installed: npm install -D @types/google.map

Ruan · Accepted Answer · 2022-07-26 12:57:54Z

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, 2022 at 12:57

Ruan

4,32411 gold badges68 silver badges92 bronze badges

Comments

Tukkan · Accepted Answer · 2021-02-08 12:28:05Z

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 8, 2021 at 12:28

Tukkan

1,6253 gold badges20 silver badges34 bronze badges

Comments

dt170 · Accepted Answer · 2021-09-01 17:45:20Z

0

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

npm i @types/[email protected] --save-dev

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

answered Sep 1, 2021 at 17:45

dt170

5053 silver badges12 bronze badges

Comments

Ramin Ar · Accepted Answer · 2019-05-03 16:24:19Z

`
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.

Collectives™ on Stack Overflow

Angular2 Cannot find namespace 'google'

14 Answers 14

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

10 Comments

3 Comments

5 Comments

1 Comment

2 Comments

1 Comment

Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

14 Answers 14

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

10 Comments

3 Comments

5 Comments

1 Comment

2 Comments

1 Comment

Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

Linked

Related