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.

Answer 1

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

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

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

4. 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);
});

Answer 2

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.

Answer 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';

Answer 4

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';

Answer 5

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.

Answer 6

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.

Answer 7

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"]

Answer 8

Add

declare var google: any;

after the TypeScript imports

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

Answer 9

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

Answer 10

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.

Answer 11

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.

Answer 12

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" />

Answer 13

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

Answer 14

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