Angular2 Cannot find namespace 'google'

Solution 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 tsconfig.app.json respectively in tsconfig.spec.json
3. Restart npm server

In the end should look like this:

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

Solution 2:

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

Solution 3:

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.

Solution 4:

Add

declare var google: any;

after the TypeScript imports

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

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