web-dev-qa-db-fra.com

Angular 5 - google n'est pas défini (Google Maps)

Je souhaite utiliser Google Maps sur mon application Angular 5, mais j'ai encouragé un problème.

Lorsque view est en cours de chargement, je reçois une erreur dans la console 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)..

Mon composant:

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

J'utilise AgmCoreModule installé par npm:

npm install @agm/core --save

J'ai aussi essayé d'importer la classe LatLang de cette façon:

import LatLng = google.maps.LatLng;

Et utiliser le script dans mon index.html

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

Mais tout le temps, j'ai reçu les mêmes problèmes… .. Est-ce que quelque chose me manque?

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

agm/core charge Google Maps et définit votre clé d’API lors de l’importation du module. Vous n'avez donc pas besoin de <script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places" async defer></script>

Suivez leur guide de démarrage tutorial . Vous allez vous retrouver avec quelque chose comme

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

Vous devez simplement ajouter les dépendances et les types correspondants à votre projet .

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

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

Et n'oubliez pas la clé d'API que vous devriez obtenir depuis https://developers.google.com/places/web-service/get-api-key , après l'avoir configurée dans le module via AgmCoreModule ou tout simplement en ajoutant un script d'importation en HTML, j'utilise le composant GMap de PrimeNG et toutes ces étapes m'ont aidé à aller de l'avant.

1
Garik Kalashyan

Obtenez la clé de google maps et placez-la dans app.module.ts sous @NgModule

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

et en HTML ajouter ceci 

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

et aussi cela dans le CSS

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