When trying to integrate google maps with your Angular application, you may encounter the following error : Angular Uncaught ReferenceError: google is not defined. This tutorial will show how to fix it.
Solution
First you need to install @types/googlemaps :
|
1 |
npm install --save @types/googlemaps |
Then if you are using Angular-cli, add googlemaps to types in src/tsconfig.app.json :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", "types": [ "googlemaps" ] }, "exclude": [ "test.ts", "**/*.spec.ts" ] } |
Note that if you want to call a constructor you must do it after maps api is loaded. Exemple of working with @agm/core :
|
1 2 3 4 5 6 7 8 9 10 11 |
ngOnInit(): void { this.mapsAPILoader.load().then(() => { const bounds = new google.maps.LatLngBounds( new google.maps.LatLng(54.69726685890506, -2.7379201682812226), new google.maps.LatLng(55.38942944437183, -1.2456105979687226) ); } ); } |
The tutorial source code is available on Github. Download the source