Angular-google-maps: webpack integration fail with empty grey map

[nasreddineskandrani]

Hi
i tried to use this component into my project. The map remain grey all the time. I have no idea why it's not working and i tried couple things.

Someone has seen this behavior before?

I guess it's related to webpack somehow! but i don't know where to start debugging this.
maybe someone can give it a try with the starter project am using:
https://github.com/rangle/angular2-redux-starter

[SebastianM]

@nasreddineskandrani please provide some code. Otherwise nobody can help you.

[nasreddineskandrani]

ok i ll setup an isolated repo. with the bug present on it the next week-end. thank's for feedback

[akiokio]

@nasreddineskandrani i was setting up and I got the grey map, after inspecting the error was "RefererNotAllowedMapError" so in my case I needed to add my local ip to the "Accept requests from these HTTP referrers" field on the google console you can find more information in the chrome console

[RedFour]

I'm having a similar issue using angular-cli@webpack, and angular RC5. My test app will show the google map briefly before getting replaced by a grey box with error messages. The console say "Google Maps API warning: NoApiKeys"

Here are my steps:

• Installed angular2-google-maps (0.13.0) using npm.
• imported the AgmCoreModule in my app.modules.ts
• added AgmCoreModule.forRoot(), to imports metadata.

How do I input my API key into the AgmCoreModule given the new modules system of RC5?

[rolandoldengarm]

@RedFour I've got exactly the same issue. forRoot() should accept a configuration object, similar to RouterModule.forRoot(config) in the upgrade tutorial: https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html

See example RouterModule: https://github.com/angular/angular/blob/master/modules/%40angular/router/src/router_module.ts

[SebastianM]

@rolandoldengarm yeah, I thought about supporting the configLiteral in the forRoot method. Maybe I will add that in the next version. But for now you can use it like so:

@NgModule({
  imports: [BrowserModule, AgmCoreModule.forRoot()],
  providers: [
    provideLazyMapsAPILoaderConfig({apiKey: 'key'})
  ],
  declarations: [MyMapsProjectAppComponent],
  bootstrap: [MyMapsProjectAppComponent]
})
export class AppModule {
}

[nasreddineskandrani]

1/. I recloned my repo

2/. [ @SebastianM doc need update] You need to use a tagged version of this lib or the import angular2-google-maps/core will not work. => npm install [email protected] --save

(you can get warning if you are not in the good RC of angular2 but ignore them)

in my case am using:
"angular2-google-maps": "^0.12.0",
with angular rc4.

3/. Then basically did the quick start in this page https://angular-maps.com/

4/. After that i did what @SebastianM mention on top with provideLazyMapsAPILoaderConfig after generating an apiKey in google console. And now the map works like a charm

5/. you can add markers on the map using the example in the plunker:
http://plnkr.co/edit/YX7W20?p=preview

so consider this request as done. thanks for help all.