Lazy-maps-api-loader error

[ravindranpandu]

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

[sebholstein]

He @ravindranpandu,

do you load the google maps script by yourself anywhere on the page?

[ravindranpandu]

No i just import it to the typescript file, everytime i visit that page a script tag is appended to the html which links to the googlemap api.

In the above attached image you can see the googlemap script tag is appended 7 times, which means i had visited the page 7 times.

[sebholstein]

@ravindranpandu hmm, can you show me your bootstrap() function?

[ravindranpandu]

Hi @SebastianM,

To make it easier i have created a sample app, you can see the issue in that ionic app.
https://github.com/ravindranpandu/angular-map

Thanks in advance

[ravindranpandu]

Try to visit the map page more than once, you will get the issue which i was talking about.

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

I am not sure why this is happening, please let me know what could be wrong?

Thanks

[sebholstein]

@ravindranpandu this line is the reason:
https://github.com/ravindranpandu/angular-map/blob/master/app/pages/map/map.ts#L14

You create multiple instances of the maps loader when you include the ANGULAR2_GOOGLE_MAPS_PROVIDERS in this place.

You have to use ANGULAR2_GOOGLE_MAPS_PROVIDERS in your bootstrap() method.

[ravindranpandu]

@SebastianM i now initialised the ANGULAR2_GOOGLE_MAPS_PROVIDERS in the main app.ts provider, now it works as expected, thanks for your time.

[Ovidiu-S]

This seems to also happen when I use angular2-google-maps in a feature module instead of the root app module. Can anyone confirm ?

[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

[szykov]

Guys, anybody knows how now we work with lazy loading?
GOOGLE_MAPS_PROVIDERS is deprecated and we use AgmCoreModule instead which loads every time API libraries when a module loads.

[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.

[szykov]

@IAMtheIAM thanks. My greetings to @efstathiosntonas too 🥇

[zee92]

if you are calling it again somewhere in index file or somewhere else you have to remove it.
you need to call it just once in your project.

[Riasets]

Hi, guys, anybody knows how to find place where I included maps second time?
If first page that i visit has map, i can't see it. But if page with map that i visit not first, it's ok.
Thanks

[IAMtheIAM]

Without a code sample it will be difficult to help you @Riasets

[Riasets]

Repo link: https://github.com/Riasets/test
Sorry for shitty code
@IAMtheIAM

[Riasets]

login: [email protected]
password: test1234

[IAMtheIAM]

@Riasets I cloned and ran your app, looks very good. For me, after login the map immediately loads, and if i change to any other page, map also loads fine. I don't see any problem, can you clarirfy more?

[Riasets]

@IAMtheIAM Login page was first and map page was secaond. In this case map loads. But if you already authorized and try going to /home page, for example, map will not loads. Or try to reload page with map, it will not loads too. And also you can see at dev tools 2 the same scripts with google maps