wake-up-neo.net

Angular 5 - Google ist nicht definiert (Google Maps)

Ich möchte Google Maps in meiner App Angular 5 verwenden, aber ich habe einige Probleme befürwortet.

Wenn die Ansicht geladen wird, erhalte ich eine Fehlermeldung in der Konsole 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)..

Meine Komponente:

  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 {}

Ich verwende AgmCoreModule, das von npm installiert wird:

npm install @agm/core --save

Ich habe auch versucht, die LatLang-Klasse auf diese Weise zu importieren:

import LatLng = google.maps.LatLng;

Und verwende ein Skript in meiner index.html

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

Aber die ganze Zeit bekam ich die gleichen Probleme ... Fehlt mir etwas?

angulargoogle-mapstypescriptgoogle-maps-api-3npm
4
Valverde

agm/core lädt Google Maps und setzt Ihren API-Schlüssel im Modulimport, sodass Sie <script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places" async defer></script> nicht benötigen.

Folgen Sie den ersten Schritten Tutorial . Sie werden mit etwas wie enden

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

Sie müssen lediglich entsprechende Abhängigkeiten und Typen zu Ihrem Projekt hinzufügen.

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

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

Und vergessen Sie nicht den API-Schlüssel, den Sie von https://developers.google.com/places/web-service/get-api-key erhalten sollten, nachdem Sie ihn per eingestellt haben AgmCoreModule oder nur Importskript in HTML, ich verwende die GMap-Komponente von PrimeNG und all diese Schritte haben mir geholfen, weiterzumachen.

1
Garik Kalashyan

Holen Sie sich den Schlüssel von Google Maps und legen Sie diesen Schlüssel in app.module.ts unter @NgModule

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

und in HTML das hinzufügen 

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

und auch dies in der CSS

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