Angular-google-maps: Erreur Lazy-maps-api-loader

Il @ravindranpandu ,

chargez-vous le script google maps par vous-même n'importe où sur la page?

Non, je l'importe simplement dans le fichier dactylographié, chaque fois que je visite cette page, une balise de script est ajoutée au code HTML qui renvoie à l'API googlemap.

Dans l'image ci-dessus, vous pouvez voir que la balise de script googlemap est ajoutée 7 fois, ce qui signifie que j'ai visité la page 7 fois.

@ravindranpandu hmm, pouvez-vous me montrer votre fonction bootstrap() ?

Salut @SebastianM ,

Pour vous faciliter la tâche, j'ai créé un exemple d'application, vous pouvez voir le problème dans cette application ionique.
https://github.com/ravindranpandu/angular-map

Merci d'avance

Essayez de visiter la page de la carte plus d'une fois, vous obtiendrez le problème dont je parlais.

You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

Je ne sais pas pourquoi cela se produit, s'il vous plaît laissez-moi savoir ce qui pourrait ne pas être le cas.

Merci

@ravindranpandu cette ligne est la raison:
https://github.com/ravindranpandu/angular-map/blob/master/app/pages/map/map.ts#L14

Vous créez plusieurs instances du chargeur de cartes lorsque vous incluez ANGULAR2_GOOGLE_MAPS_PROVIDERS à cet endroit.

Vous devez utiliser ANGULAR2_GOOGLE_MAPS_PROVIDERS dans votre méthode bootstrap ().

@SebastianM J'ai maintenant initialisé ANGULAR2_GOOGLE_MAPS_PROVIDERS dans le fournisseur principal app.ts, maintenant cela fonctionne comme prévu, merci pour votre temps.

Cela semble également se produire lorsque j'utilise angular2-google-maps dans un module de fonctionnalités au lieu du module d'application racine. Quelqu'un peut-il confirmer?

Dans vos importations app.module.ts, ajoutez:

AgmCoreModule.forRoot({ apiKey: 'xxxxxx', libraries: ['places'] })

(bien sûr, vous pouvez supprimer des bibliothèques: ['places'])

puis dans un module partagé, ajoutez:
en importations
AgmCoreModule
et dans les exportations:
AgmCoreModule

puis le
You have included the Google Maps API multiple times on this page. This may cause unexpected errors. sera parti

Les gars, tout le monde sait comment nous travaillons maintenant avec le chargement paresseux?
GOOGLE_MAPS_PROVIDERS est obsolète et nous utilisons plutôt AgmCoreModule qui se charge à chaque fois que les bibliothèques d'API se chargent.

@szykov La solution pour utiliser ce composant angular2 dans un sous-module chargé paresseusement est de faire ce que @efstathiosntonas a dit

Tout d'abord, dans votre app.module.ts , incluez l'API

// app.module.ts
import { AgmCoreModule } from 'angular2-google-maps/core';

//other stuff here

@NgModule({
   bootstrap: [AppComponent],
   declarations: [ //  declarations contains: components, directives and pipes],
   imports: [ // import other modules here
        AgmCoreModule.forRoot({
            apiKey: 'YOUR_KEY'
       })],
   providers: [ // expose our Services and Providers into Angular's dependency injection]
})

Ensuite, à l'intérieur de votre sous-module, incluez-le à nouveau mais sans la clé API

// maps.module.ts (submodule)
import { AgmCoreModule } from 'angular2-google-maps/core';

// other stuff

@NgModule({
   imports: [ // other imports here
      AgmCoreModule
   ],
   declarations: [ // Components / Directives / Pipes
      MapComponent
   ]
})

Maintenant, il chargera paresseusement le composant angular2 maps et ne demandera le javascript qu'une seule fois. J'ai fait cela en utilisant webpack 2 et cela fonctionne très bien. Merci les gars pour le bon travail ici.

@IAMtheIAM merci. Mes salutations à @efstathiosntonas aussi 🥇

si vous l'appelez à nouveau quelque part dans le fichier d'index ou ailleurs, vous devez le supprimer.
vous devez l'appeler une seule fois dans votre projet.

Salut les gars, tout le monde sait comment trouver un endroit où j'ai inclus des cartes une deuxième fois?
Si la première page que je visite a une carte, je ne peux pas la voir. Mais si la page avec la carte que je visite n'est pas la première, c'est ok.
Merci

Sans un exemple de code, il sera difficile de vous aider @Riasets

Lien repo: https://github.com/Riasets/test
Désolé pour le code de merde
@IAMtheIAM

connexion: [email protected]
mot de passe: test1234

@Riasets que j'ai cloné et exécuté votre application, ça a l'air très bien. Pour moi, après la connexion, la carte se charge immédiatement, et si je passe à une autre page, la carte se charge également très bien. Je ne vois aucun problème, pouvez-vous clarifier davantage?

La page de connexion