web-dev-qa-db-ja.com

Angular 5-Googleが定義されていません（Googleマップ）

Angular 5アプリでGoogleマップを使用したいのですが、問題が発生しました。

ビューの読み込み中にjsコンソールにエラーが表示されます：

LoginComponent_Host.ngfactory.js? [sm]:1 ERROR ReferenceError: google is not defined 
at LoginComponent.ngAfterViewInit (login.component.ts:15) 
at callProviderLifecycles (core.js:12428)..

私のコンポーネント：

  import {AfterViewInit, Component} from '@angular/core';
    declare let google: any;

    @Component({
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.css']
    })
    export class LoginComponent implements AfterViewInit {

       ngAfterViewInit(): void {
          let Origin = new google.maps.LatLng(4.0, 2.0 );
          let destination = new google.maps.LatLng(1.0, 1.5);
       }

       constructor() {}
    }

app.module.ts

import {AgmCoreModule} from '@agm/core';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule,
    AgmCoreModule.forRoot({
      apiKey: 'KEY'
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

NpmによってインストールされたAgmCoreModuleを使用しています。

npm install @agm/core --save

LatLangクラスもこの方法でインポートしてみました：

import LatLng = google.maps.LatLng;

そして、私のindex.htmlでスクリプトを使用します

<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places" async defer></script>

しかし、いつも同じ問題を受け取りました。何か不足していますか？

angulargoogle-mapstypescriptgoogle-maps-api-3npm
4
adam-pociejowski

agm/core Googleマップを読み込み、モジュールのインポート内にAPIキーを設定するため、必要ありません<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places" async defer></script>

はじめに チュートリアル に従ってください。あなたは次のようなものになるでしょう

<agm-map [latitude]="lat" [longitude]="lng">
    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
4
LLai

対応する依存関係とタイプをプロジェクトに追加するだけです。これらはそうです。

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

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

そして、 https://developers.google.com/places/web-service/get-api-key から取得する必要があるAPIキーを設定した後、忘れないでくださいモジュールをAgmCoreModule経由で、またはHTMLにインポートスクリプトを追加するだけで、PrimeNGのGMapコンポーネントを使用しており、これらのすべての手順を実行するのに役立ちました。

1
Garik Kalashyan

Googleマップからキーを取得し、そのキーを@NgModuleの下のapp.module.tsに配置します

AgmCoreModule.forRoot({
   apiKey: 'your key generated from google maps'
});

そしてHTMLでこれを追加してください

<agm-map [latitude]="lat" [longitude]="lng">
   <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

そしてこれもCSSで

agm-map {
  height: 300px;
}
1
Saleem Mustafa