Components: fr(google-maps): add forRoot() for global initializing

[DwieDima]

Feature Description

like many modules already use it, it would be nice if you could initialize the Google Map with the method forRoot() in app.module.ts with given parameters.

Use Case

initialize with parameters like:

• apiKey (link apiKey from environment.ts)
• language
• region
• styles (set global styles for map and marker)

These are the first ones I thought of. I'm sure there are many more.

[devversion]

That might be somewhat similar to https://github.com/angular/components/issues/17037.

[devversion]

@DwieDima Aren't these things currently all configurable as we don't load the Google Maps API automatically? So it's actually the responsibility of actual consumers of the google-maps package.

Is this a proposal that we should load the API automatically and provide these options?

[DwieDima]

@devversion yes, you can configure all this yourself.
But it would be nicer to set this globally. For example I have to set the style of the map again, if I want to use the component in a new page.

To answer your question: yes.

[devversion]

@DwieDima Thanks for the quick response. Could you help providing a small example of styles you are referring to? My thinking is that apiKey, language, region etc. are configurable when you actually load the API. This then should be global to your application as you only load the API once.

So only the styles are a concern here? Are you talking actual settings in the google-maps component, or CSS styles that you need to write multiple times?

[DwieDima]

@devversion i'm referring to the implementation like agm/core did.
Also ionic did it pretty well and high customizable.

My intention would be to set basic config like apiKey, but also styling options like google.maps.MapTypeStyle and pins.

My PR was mainly created to set styles globally.
But i think at this point other options could be set as well.

Would that be possible?

[devversion]

Thanks for clarifying. So I think there are two parts you're requesting:

1. Global options for the API loading mechanism. That would also involve us automatically loading the google-maps API (currently that's up to the user)
2. Global options for actual google-map parts (such as google.maps.MapTypeStyle).

Both of those things sound like reasonable feature requests to me. I'm slightly unsure about (1) as it seems like the intention was that the API-loading responsibility is left to the consumers. Not sure about that though.

I assume @mbehrlich, if available, might be best to answer this.

[daddywoodland]

Hi,

I found this feature request as we're moving over from agm/core and are now loading the API key when loading the google maps script in index.html as suggested in the example.

I'd prefer to load the API key from an environment variable when loading this module as suggested above, so that we can use different keys in dev/test/live and that's a standard mechanism for doing so in Angular I believe.

This is just some info on why it could be useful is all. Thanks very much for all your great work!

[mbehrlich]

It's been brought up often, and we've discussed this periodically. One of the reasons we've never done this is that we want the user to be aware of the scripts that are being introduced on their page, and we're worried about obfuscating that from the user. Regarding global options like styling, I will look into this further.

[jpoehnelt]

Also check out @googlemaps/js-api-loader.