typescript Angular 2 (Angular-cli) : Uncaught ReferenceError: google is not defined
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42348817/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2 (Angular-cli) : Uncaught ReferenceError: google is not defined
提问by Radouane ROUFID
I have been struggling for a couple of hours trying to make work googlemapsPlaceResultin my Angular 2 project that uses Angular-cli.
我一直在挣扎了几个小时试图使工作的GoogleMapsPlaceResult在我的角度2项目用途Angular-cli。
I had to install googlemapsusing @types and add it under the attribute "types"of my tsconfig.jsonconfiguration file.
我必须googlemaps使用@types安装并将其添加"types"到我的tsconfig.json配置文件的属性下。
{
...
"types": [
"google-maps"
]
}
}
And I succeed to use google.maps.places.PlaceResultin my Angular 2 Component by simply importing it !
我google.maps.places.PlaceResult通过简单地导入它成功地在我的 Angular 2 组件中使用它！
import { ActivatedRoute, Params } from "@angular/router";
import { MapsAPILoader } from "angular2-google-maps/core";
import PlaceResult = google.maps.places.PlaceResult;
import GeocoderRequest = google.maps.GeocoderRequest;
...
Several hours later, I had to work with google.maps.Marker, which is in the same definition file as PlaceResultand GeocoderRequest. So I simply imported it as below :
几个小时后，我不得不使用google.maps.Marker，它与PlaceResult和位于同一定义文件中GeocoderRequest。所以我简单地将它导入如下：
[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 error at runtime 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
Please note that webpack throws this error at line 14of my component. Meaning that (and correct me if I'm wrong) the previous lines (that uses the same "google") worked well.
请注意 webpack 在我组件的第 14 行抛出这个错误。这意味着（如果我错了，请纠正我）前几行（使用相同的“google”）运行良好。
Am'I missing something ?
我是不是错过了什么？
I use :
我用 ：
- Angular : 2.4
- Angular-CLI : 1.0.0-beta.24
- typescript : 2.0.10
- angular2-google-maps: 0.17.0
- 角度：2.4
- Angular-CLI：1.0.0-beta.24
- 打字稿：2.0.10
- angular2-google-maps: 0.17.0
回答by Radouane ROUFID
Update
更新
Regarding import LatLngBounds = google.maps.LatLngBounds;I find out that I was calling the custructor (new LatLngBounds()) before the init of Maps api. In fact, I'm using @agm/core;. And constructor has to be called after load()as below
关于导入，LatLngBounds = google.maps.LatLngBounds;我发现我在new LatLngBounds()Maps api 初始化之前调用了 custructor ( )。事实上，我正在使用@agm/core;. 和构造函数之后调用load()如下
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 in my typings.d.ts the following import
我在我的 Typings.d.ts 中添加了以下导入
import {} from '@types/googlemaps';
Original answer
原答案
I solved my problem by having the following config :
我通过以下配置解决了我的问题：
1- package.json
1- package.json
"dependencies": {
...
"googlemaps": "^1.12.0",
...
}
2- tsconfig.json
2- tsconfig.json
"types": [
...
"googlemaps"
]
3- And add the google api script in my index.html
3- 并在我的index.html 中添加 google api 脚本
<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 like below
4- 在组件中，像下面一样使用它
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;
}
