web-dev-qa-db-ja.com

Angular 2（Angular-cli）：Uncaught ReferenceError：google is not defined

Angular Angular-cliを使用する2つのプロジェクトで、数時間googlemapsPlaceResultを機能させるために苦労しています。

@typesを使用してgooglemapsをインストールし、"types"構成ファイルのtsconfig.json属性の下に追加する必要がありました。

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

Angular 2コンポーネントでgoogle.maps.places.PlaceResultを使用することに成功しました。インポートするだけです。

import { ActivatedRoute, Params } from "@angular/router";
import { MapsAPILoader } from "angular2-google-maps/core";

import PlaceResult = google.maps.places.PlaceResult;
import GeocoderRequest = google.maps.GeocoderRequest;
...

数時間後、PlaceResultおよびGeocoderRequestと同じ定義ファイルにあるgoogle.maps.Markerを使用する必要がありました。だから私は単にそれを以下のようにインポートしました：

[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;
...

しかし、実行時に予期しないエラーが発生しました

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

コンポーネントの14行目でwebpackがこのエラーをスローすることに注意してください。つまり、（同じ "google"を使用する）前の行がうまく機能したこと（そして、間違っている場合は修正してください）です。

何かが足りませんか？

私が使う ：

  • 角度：2.4
  • Angular-CLI：1.0.0-beta.24
  • TypeScript：2.0.1
  • angular2-google-maps：.17.
google-mapsangulartypescriptangular-cliangular2-google-maps
10
Radouane ROUFID

更新

インポートについて_LatLngBounds = google.maps.LatLngBounds;_ Maps APIの初期化の前に、custructor（new LatLngBounds()）を呼び出していたことがわかりました。実際、私は_@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)));
                        }
                    });

                }
            );
}
_

そしてtypings.d.tsに次のインポートを追加しました

_import {} from '@types/googlemaps';
_

元の答え

私は次の設定をすることで問題を解決しました：

1- package.json

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

2- tsconfig.json

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

3-そして、google 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-コンポーネントでは、以下のように使用します

_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;

}
_
11
Radouane ROUFID