Angular-google-maps: How to use api key with angular2-google-maps.

[santhoshreddy31]

Thanks for a great repo. Can you say me how to use API key with angular2-google-maps.

[SebastianM]

Hi @santhoshreddy31. Here's an example:

import {provide} from 'angular2/core';
import {ANGULAR2_GOOGLE_MAPS_PROVIDERS, LazyMapsAPILoaderConfig} from 'angular2-google-maps/core';

bootstrap(AppComponent, [
  ANGULAR2_GOOGLE_MAPS_PROVIDERS,
  provide(LazyMapsAPILoaderConfig, {useFactory: () => {
    let config = new LazyMapsAPILoaderConfig();
    config.apiKey = 'mykey';
    return config;
  }})
])

There are also several more options you can configure: https://angular-maps.com/docs/api/latest/ts/core/LazyMapsAPILoaderConfig-class.html

I close this issue now. Feel free to reopen or comment if you have further questions.

[imichelakos]

Still getting the error after using the LazyMapsAPILoader and the versions 3.18,3.19,3.23,3.24

Any help?

[bkshashi30]

Hi @SebastianM I entered mykey like how you showed above. I don't have any errors, but map is not loading. Any idea why?

[josx]

same here @bkshashi30 did you fix it?

[paruvellyvishwanath]

how to use API key in angular 2.0?

[lazarljubenovic]

@paruvellyvishwanath You need to import the module along with the information about your API key using forRoot static method of AgmCoreModule. You can see the example in the docs.

[SunilGauswami]

Just use api key in your index.html file.
Example:
Its solved my problem. for Error - MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error #537