Lazy-maps-api-loader error

Hi @SebastianM ,

I am using angular2-google-maps in ionic2/angular2 in which we need the map only in one page and it works fine too, but every consecutive visit to the same page gives me an error.

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

Please let me know if i am missing something.

Thanks

[efstathiosntonas]

In your app.module.ts imports add:

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

(ofcourse you can remove libraries: [‘places’])

and then in a shared module add: in imports AgmCoreModule and in exports: AgmCoreModule

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

[IAMtheIAM]

@szykov The solution to using this angular2 component in a lazy loaded submodule is to do what @efstathiosntonas said

First, in your main app.module.ts, include the 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]
})

Then inside your submodule, include it again but without the API key

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

// other stuff

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

Now it will lazy load the angular2 maps component and only request the javascript once. I did this using webpack 2 and it works fine. Thanks guys for the good work here.