1

I'm make google place Autocomplete search function in my angular application, when i was run the application, cli was give that error message.

angular cli version - 7.3.8

app.module.ts

import { GooglePlaceModule } from "ngx-google-places-autocomplete";
import { AgmCoreModule } from '@agm/core';

google-place.components.ts

declare const google: any;
import { MapsAPILoader } from '@agm/core';
 public latitude: number;
 public longitude: number;
 public searchControl: FormControl;
 public zoom: number;

 constructor(
    private mapsAPILoader: MapsAPILoader,
    private ngZone: NgZone
 ) { }

 ngOnInit() {

     // map script start==========================================
    //set google maps defaults
    this.zoom = 12;
    this.latitude =6.7370647;
    this.longitude =79.93713920000005;

    //create search FormControl
    this.searchControl = new FormControl();

    //set current position
    this.setCurrentPosition();

    //load Places Autocomplete
    this.mapsAPILoader.load().then(() => {
      let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement);
      autocomplete.addListener("place_changed", () => {
        this.ngZone.run(() => {
          //get the place result
          let place: google.maps.places.PlaceResult = autocomplete.getPlace();

          //verify result
          if (place.geometry === undefined || place.geometry === null) {
            return;
          }

          //set latitude, longitude and zoom
          this.latitude = place.geometry.location.lat();
          this.longitude = place.geometry.location.lng();
          this.zoom = 12;
          console.log("lat--> "+ this.latitude +" lon-->"+ this.longitude);
        });
      });
    });
    // map script end==========================================
  }

tsconfig.json

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

error TS2503: Cannot find namespace 'google'.

Thevin Malaka.
  • 151
  • 1
  • 7
  • 20

2 Answers2

3

you should declare google as ambient in your component (google-place.components.ts):

// Declare google ambient
declare var google: any;

Ambient declarations are a way of telling the TypeScript compiler that the actual source code exists elsewhere. ... Ensuring typesafety and intellisense, Ambient declarations help to seamlessly integrate other js libraries into TypeScript.

You also need to add corresponding dependencies and types to your project. So these are.

in tsconfig.json -> "types":[... "googlemaps"]

in package.json -> "dependencies":[... "googlemaps": "^1.12.0"]

Get key from google maps and then place that key in app.module.ts under @NgModule

AgmCoreModule.forRoot({
   apiKey: 'your key generated from google maps'
});
nircraft
  • 8,242
  • 5
  • 30
  • 46
0

I faced with the same problem in Angular 8.

My CLI version is 8.1.2.

I solved the issue as follows: app.module.ts:

imports     : [
...
AgmCoreModule.forRoot({
          apiKey: 'your API key',
          libraries: ['places']
        })
]

tsconfig.app.json:

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "outDir": "./out-tsc/app",
        "types": [
            "node",
            "googlemaps"
        ]
    },
...
}

As you can see - I told AgmCoreModule what exactly module he need to and I told the compiler which extra type he mast use for compile. And now I can use google in my component as follows:

import {MapsAPILoader} from '@agm/core';
...
constructor(private mapsAPILoader: MapsAPILoader){}

ngOnInit() {this.loadGoogle();}

loadGoogle() {
    this.mapsAPILoader.load().then(() => {
      this.placeService = new google.maps.places.AutocompleteService();
      this.placeServiceIsReady = true;
    });
  }
Dmytro
  • 71
  • 7