Loading google maps libraries (Support/Move to)

[Nickztar]

https://developers.google.com/maps/documentation/javascript/libraries#libraries-for-bootstrap-url-legacy

The current way of using this library is dependent on using the legacy way of loading extra libraries and also loading the api. I have thought a bit about this problem and I think it would/should be possible to use the new way, which allows loading more libraries and lazy-load the current ones. This is somewhat of a big change but could be very nice. This way we could abstract away parts of the required setup (adding maps to index.html etc). I will try to create a PR soon so just creating a issue to see if this is something that is of intrest?

Pros:

• We can abstract the loading process (take api-key & version in a Program.cs registration?)
• Allows loading more/new libraries
• Lazy-loading of libraries
• We could handle failures etc (We would control the load so we could handle issues where js-api is not present)
• Current way is legacy (not sure if it will be removed?)

Cons:

• I guess some people like to tune their own api-loading (but feels like a useless thing?)
• Guess it would be a bit more for us to handle, but we could expore ways for people to customize features etc so we wouldn't have to build support for every new thing they add.

Let me know if anyone has any thoughts/suggestions 😄

[valentasm1]

I dont see how it is big change. IMO benefit that map will render faster. Other parts are just minor. Also i think if you dont explicitly load libraries, key then nothing should be done. We shouldnt change default behavious.

Overall good luck and thank you for effort

[radnor]

@Nickztar Have you been able to work on a PR for this feature? Google is calling out usage of the "legacy bootstrap tag" in the console (see below). Moving to the new loader will also benefit those of us responsible for improving Lighthouse performance scores. 😄

Google Maps JavaScript API has been loaded directly without loading=async. This can result in suboptimal performance. For best-practice loading patterns please see https://goo.gle/js-api-loading

[valentasm1]

Here is example. https://github.com/Mewriick/Blazor.GoogleMap/blob/master/src/Blazor.GoogleMap/Components/GoogleMap.cs#L51

[radnor]

Here is example.

Google has fundamentally changed the way the maps script is loaded, using a bootstrap loader (see https://developers.google.com/maps/documentation/javascript/overview#Loading_the_Maps_API). Simply changing the SRC attribute is not enough.

[valentasm1]

I mean not the google part, but how inject custom div into blazor with google maps script.

[valentasm1]

I played around with couple variations. Not sure which approach to take it. Maybe some of them wont work full, but at beginning all looks ok.

1. Build script tag wiht RenderTreeBuilder
2. Add to js code (smtp like this blazorGoogleMaps.objectManager.initMap) and call it before creating map component. Passing values as object and parse it in function. Blazor nicely await js async fuction :).
3. Add script to root js file and call on script startup. This one dont work since i need to await it before creating map. Maybe there are call back actions. I dont know

I think i will go with 2 option. Maybe there are more ways.

[valentasm1]

Made PR. Will merge at end of this week. https://github.com/rungwiroon/BlazorGoogleMaps/pull/324

[valentasm1]

https://www.nuget.org/packages/BlazorGoogleMaps/4.2.0

[Nickztar]

Great stuff!!! Will check it out when I get some time but looks really good! 🚀 👍🏼