All geek questions in one place

Angular 2 (Angular-cli): Not prepared ReferenceError: google not defined

I am trying to work for several hours trying to make googlemaps PlaceResult work in my Angular 2 project that uses Angular-cli .

I had to install googlemaps using @types and add it under the "types" attribute of my tsconfig.json configuration file.

 { ... "types": [ "google-maps" ] } }

And I managed to use google.maps.places.PlaceResult in my Angular 2 component just by importing it!

 import { ActivatedRoute, Params } from "@angular/router"; import { MapsAPILoader } from "angular2-google-maps/core"; import PlaceResult = google.maps.places.PlaceResult; import GeocoderRequest = google.maps.GeocoderRequest; ...

A few hours later I had to work with google.maps.Marker , which is in the same definition file as PlaceResult and GeocoderRequest . So I just imported it as shown below:

 [Line 12] import PlaceResult = google.maps.places.PlaceResult; [Line 13] import GeocoderRequest = google.maps.GeocoderRequest; [Line 14] import Marker = google.maps.Marker; [Line 15] import LatLng = google.maps.LatLng; ...

But I had an unexpected runtime error saying

 Uncaught ReferenceError: google is not defined search.component.ts:14 at Object.444 (search.component.ts:14) at __webpack_require__ (bootstrap 26c2b97…:52) at Object.727 (app.config.ts:11) at __webpack_require__ (bootstrap 26c2b97…:52) at Object.602 (src async:7) at __webpack_require__ (bootstrap 26c2b97…:52) at Object.1258 (.*$:7) at __webpack_require__ (bootstrap 26c2b97…:52) at webpackJsonpCallback (bootstrap 26c2b97…:23) at main.bundle.js:1

Note that webpack throws this error on line 14 of my component. This means that (and correct me if I am wrong) the previous lines (which use the same google) worked well.

Is something missing?

I use:

  • Angular: 2.4
  • Angular -CLI: 1.0.0-beta.24
  • typescript: 2.0.10
  • angular2 -google-maps: 0.17.0
+5
source share
1 answer

Update

Regarding the import LatLngBounds = google.maps.LatLngBounds; , then I found that I called custructor ( new LatLngBounds() ) before initializing the Maps api. In fact, I am using @agm/core; . And the constructor should be called after load() as shown below

 ngOnInit() { this.mapsAPILoader.load().then(() => { this.page$.subscribe(page => { if (page && page.content) { this.latLngBounds = new google.maps.LatLngBounds(); page.content.forEach(w => this.latLngBounds.extend(new google.maps.LatLng(lat, lng))); } }); } ); }

and I added the following import to my typings.d.ts

 import {} from '@types/googlemaps';

Original answer

I solved my problem with the following configuration:

1- package.json

 "dependencies": { ... "googlemaps": "^1.12.0", ... }

2- tsconfig.json

 "types": [ ... "googlemaps" ]

3- And add google api script to my index.html

 <head> ... </head> <body> <app-root>Loading...</app-root> <script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places&language=fr" async defer></script> </body> </html>

4- In components use it as below

 declare var google: any; @Component({ ... }) export class SearchComponent implements OnInit, AfterViewInit { // Google Maps bounds: google.maps.LatLngBounds; markers: google.maps.Marker[]; infoWindow: google.maps.InfoWindow; }
+2
source

Source: https://habr.com/ru/post/1264460/

More articles:


All Articles