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

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