Google maps lazy loading

ClientSideDemo/wwwroot/index.html

@@ -12,7 +12,6 @@
     <app>Loading...</app>
 
     <script src="_framework/blazor.webassembly.js"></script>
-    <script src="_content/BlazorGoogleMaps/js/objectManager.js"></script>
     <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
 </body>
 </html>

GoogleMapsComponents/GoogleMap.razor

@@ -1,21 +1,13 @@
-@using System
-@using Maps
-@using System.Threading.Tasks
-@using Microsoft.AspNetCore.Components
+@using Maps
 @using Microsoft.JSInterop
 
 @inherits MapComponent
-@implements IDisposable
+@implements IAsyncDisposable
 @inject IJSRuntime JSRuntime
 
 <div @ref="@Element" id="@Id" class="@CssClass" style="@StyleStr"></div>
 
 @code {
-    #nullable enable
-    // Load the module and keep a reference to it
-    // You need to use .AsTask() to convert the ValueTask to Task as it may be awaited multiple times
-    //private List<IJSObjectReference> moduleImports = new List<IJSObjectReference>();
-
     [Parameter]
     public string? Id { get; set; }
 
@@ -47,17 +39,20 @@
     private string StyleStr => $"height: {Height};";
 
     private ElementReference Element { get; set; }
+    private IJSObjectReference? _scriptLoaderModule;
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
         {
-            //var tasks = new List<Task<IJSObjectReference>>();
-            //tasks.Add(JSRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/BlazorGoogleMaps/js/objectManager.js").AsTask());
-            //if(!string.IsNullOrWhiteSpace(ApiKey))
-            //    tasks.Add(JSRuntime.InvokeAsync<IJSObjectReference>("import", $"https://maps.googleapis.com/maps/api/js?key={ApiKey}&v=3").AsTask());
-
-            //moduleImports.AddRange(await Task.WhenAll(tasks.ToArray()));
+            try
+            {
+                await LoadScriptAsync("_content/BlazorGoogleMaps/js/objectManager.min.js");
+            }
+            catch (Exception ex)
+            {
+                Console.WriteLine(ex.Message);
+            }
         }
 
         await InitAsync(Element, Options);
@@ -71,14 +66,27 @@
     {
         return false;
     }
+
+    private async Task<IJSObjectReference> GetJsModuleAsync()
+    {
+        _scriptLoaderModule ??= await JSRuntime.InvokeAsync<IJSObjectReference>("import",
+                "./_content/BlazorGoogleMaps/js/script-loader.min.js").AsTask();
+        return _scriptLoaderModule;
+    }
+
+    private async Task LoadScriptAsync(string scriptPath)
+    {
+        var jsModule = await GetJsModuleAsync();
+        await jsModule.InvokeVoidAsync("BlazorGoogleMaps_LoadScript", scriptPath);
+    }
+
 
-    void IDisposable.Dispose()
+    public async ValueTask DisposeAsync()
     {
-        //if(moduleImports != null && moduleImports.Count > 0)
-        //{
-        //    foreach (var mi in moduleImports)
-        //        await mi.DisposeAsync();
-        //}
-        base.Dispose();
+        if (_scriptLoaderModule != null)
+        {
+            await _scriptLoaderModule.DisposeAsync();
+        }
+        base.DisposeAsync();
     }
 }

GoogleMapsComponents/wwwroot/js/script-loader.js

@@ -0,0 +1,19 @@
+export function BlazorGoogleMaps_LoadScript(path) {
+    return new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src = path;
+        script.type = 'text/javascript';
+        script.async = true;
+
+        script.onload = () => {
+            resolve();
+        };
+
+        script.onerror = (error) => {
+            console.error(`Error loading script: ${path}`, error);
+            reject(error);
+        };
+
+        document.head.appendChild(script);
+    });
+}

README.md

@@ -29,11 +29,7 @@ OR (legacy - not recommended) Add google map script HEAD tag to wwwroot/index.ht
 ```
 
 
-2. Add path to project javascript functions file in wwwroot/index.html for Blazor WASM, or in _Host.cshtml or _HostLayout.cshtml for Blazor Server.
-```
-<script src="_content/BlazorGoogleMaps/js/objectManager.js"></script>
-```
-If you want to use marker clustering add this script as well:
+2. If you want to use marker clustering add this script in wwwroot/index.html for Blazor WASM, or in _Host.cshtml or _HostLayout.cshtml for Blazor Server
 ```
 <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
 ```