Angular-google-maps: Error de Lazy-maps-api-loader

Creado en 4 may. 2016  ·  19Comentarios  ·  Fuente: SebastianM/angular-google-maps

Hola @SebastianM ,

Estoy usando angular2-google-maps en ionic2 / angular2 en el que solo necesitamos el mapa en una página y también funciona bien, pero cada visita consecutiva a la misma página me da un error.

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

Por favor, avíseme si me falta algo.

Gracias

discussion / question

Comentario más útil

En sus importaciones de app.module.ts agregue:

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

(por supuesto, puede eliminar bibliotecas: ['lugares'])

y luego en un módulo compartido agregue:
en importaciones
AgmCoreModule
y en exportaciones:
AgmCoreModule

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

Todos 19 comentarios

Él @ravindranpandu ,

¿Carga el script de Google Maps usted mismo en cualquier lugar de la página?

No, solo lo importo al archivo mecanografiado, cada vez que visito esa página se agrega una etiqueta de secuencia de comandos al html que enlaza con la api de googlemap.

index_html

En la imagen adjunta anterior, puede ver que la etiqueta de secuencia de comandos de googlemap se agrega 7 veces, lo que significa que había visitado la página 7 veces.

@ravindranpandu hmm, ¿puedes mostrarme tu función bootstrap() ?

Hola @SebastianM ,

Para que sea más fácil, he creado una aplicación de muestra, puede ver el problema en esa aplicación iónica.
https://github.com/ravindranpandu/angular-map

Gracias por adelantado

Intente visitar la página del mapa más de una vez, obtendrá el problema del que estaba hablando.

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

No estoy seguro de por qué sucede esto, por favor avíseme qué podría estar mal.

Gracias

@ravindranpandu esta línea es la razón:
https://github.com/ravindranpandu/angular-map/blob/master/app/pages/map/map.ts#L14

Creas varias instancias del cargador de mapas cuando incluyes ANGULAR2_GOOGLE_MAPS_PROVIDERS en este lugar.

Tienes que usar ANGULAR2_GOOGLE_MAPS_PROVIDERS en tu método bootstrap ().

@SebastianM ahora inicialicé ANGULAR2_GOOGLE_MAPS_PROVIDERS en el proveedor principal de app.ts, ahora funciona como se esperaba, gracias por su tiempo.

Esto parece suceder también cuando uso angular2-google-maps en un módulo de funciones en lugar del módulo de la aplicación raíz. ¿Alguien puede confirmar?

En sus importaciones de app.module.ts agregue:

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

(por supuesto, puede eliminar bibliotecas: ['lugares'])

y luego en un módulo compartido agregue:
en importaciones
AgmCoreModule
y en exportaciones:
AgmCoreModule

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

Chicos, ¿alguien sabe cómo ahora trabajamos con la carga diferida?
GOOGLE_MAPS_PROVIDERS está obsoleto y usamos AgmCoreModule en

@szykov La solución para usar este componente angular2 en un submódulo cargado de forma diferida es hacer lo que dijo @efstathiosntonas

Primero, en tu app.module.ts , incluye la 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]
})

Luego, dentro de su submódulo, inclúyalo nuevamente pero sin la clave 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
   ]
})

Ahora cargará de forma diferida el componente de mapas de angular2 y solo solicitará el javascript una vez. Hice esto usando webpack 2 y funciona bien. Gracias chicos por el buen trabajo aquí.

@IAMtheIAM gracias. Mis saludos a @efstathiosntonas también 🥇

si lo está llamando de nuevo en algún lugar del archivo de índice o en otro lugar, debe eliminarlo.
debe llamarlo solo una vez en su proyecto.

Hola chicos, ¿alguien sabe cómo encontrar un lugar donde incluí mapas por segunda vez?
Si la primera página que visito tiene un mapa, no puedo verlo. Pero si la página con el mapa que visito no es la primera, está bien.
Gracias

Sin una muestra de código, será difícil ayudarlo a @Riasets

Enlace de repositorio: https://github.com/Riasets/test
Perdón por el código de mierda
@IAMtheIAM

inicio de sesión: [email protected]
contraseña: test1234

@Riasets Cloné y ejecuté tu aplicación, se ve muy bien. Para mí, después de iniciar sesión, el mapa se carga inmediatamente, y si cambio a cualquier otra página, el mapa también se carga bien. No veo ningún problema, ¿puedes aclarar más?

@IAMtheIAM La página de

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

alexweber picture alexweber  ·  4Comentarios

gizm0bill picture gizm0bill  ·  4Comentarios

shedar picture shedar  ·  4Comentarios

ChrisDevinePimss picture ChrisDevinePimss  ·  3Comentarios

PeterSisovsky picture PeterSisovsky  ·  3Comentarios