diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDocumentation.razor
index ecc5f8e76..529727f89 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDocumentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDocumentation.razor
@@ -71,6 +71,22 @@
     <Demo Type="typeof(GoogleMap_Demo_06_Dynamic_markers)" Tabs="true" />
 </Section>
 
+<Section Size="HeadingSize.H2" Name="Dynamic markers with clustering" PageUrl="@pageUrl" Link="dynamic-markers-with-clusters">
+    <div class="mb-3">
+        This example shows how to enable clustering, so that nearby markers group together. By using <b>GoogleMapClusterOptions</b>
+        and by setting <b>ClusteringEnabled</b> to <b>true</b>, and by setting the options to the GoogleMaps component, clustering will be enabled.
+    </div>
+    <Demo Type="typeof(GoogleMap_Demo_07_Dynamic_markers_with_clustering)" Tabs="true" />
+</Section>
+
+<Section Size="HeadingSize.H2" Name="Dynamic markers with custom clusters" PageUrl="@pageUrl" Link="dynamic-markers-with-custom-clusters">
+    <div class="mb-3">
+        This example expands on clustering, showing how to customize the cluster markers to your own design, by using the <b>GoogleMapClusterOptions</b>. The cluster marker can be customized by changing the <b>GoogleMapClusterRenderer
+        </b>. You can also change the Algorithm's as well as the <b>MaxZoom</b> level. See https://googlemaps.github.io/js-markerclusterer/public/algorithms/ for the showcase of the different algorithms available. You can define a ClusterClick event the same way you would do markers too.
+    </div>
+    <Demo Type="typeof(GoogleMap_Demo_08_Dynamic_markers_with_custom_clustering)" Tabs="true"/>
+</Section>
+
 @code {
     private const string pageUrl = RouteConstants.Demos_GoogleMap_Documentation;
     private const string pageTitle = "Blazor Google Map";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMap_Demo_07_Dynamic_markers_with_clustering.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMap_Demo_07_Dynamic_markers_with_clustering.razor
new file mode 100644
index 000000000..b63ab3dfb
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMap_Demo_07_Dynamic_markers_with_clustering.razor
@@ -0,0 +1,169 @@
+@inherits GoogleMapDemoComponentBase
+
+<div>
+    <Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="(async () => await AddWeatherMarkerAsync())">
+        <Icon Name="IconName.GeoAltFill" /> Add Marker
+    </Button>
+    <Button Color="ButtonColor.Danger" Size="ButtonSize.Small" @onclick="(async () => await UpdateWeatherMarkersAsync())">
+        <Icon Name="IconName.GeoAltFill" /> Update Markers
+    </Button>
+    <Button Color="ButtonColor.Warning" Size="ButtonSize.Small" @onclick="(async () => await RefreshMapAsync())">
+        <Icon Name="IconName.MapFill" /> Refresh Map
+    </Button>
+</div>
+
+<GoogleMap @ref="googleMapRef" 
+           ApiKey="@ApiKey"
+           Center="new GoogleMapCenter(37.43238031167444, -122.16795397128632)"
+           Height="400"
+           Width="100"
+           Zoom="10"
+           Markers="markers"
+           ClusterOptions="clusterOptions"
+           OnMarkerClick="OnGoogleMapMarkerClick" />
+
+@code {
+    Random random = new Random(2000000000);
+    GoogleMap googleMapRef = default!;
+    GoogleMapClusterOptions clusterOptions = new GoogleMapClusterOptions()
+    {
+        ClusteringEnabled = true,
+    };
+    
+    [Inject] public ToastService ToastService { get; set; } = default!;
+
+    private async ValueTask AddWeatherMarkerAsync() => await googleMapRef.AddMarkerAsync(GetRandomMarker());
+
+    private async Task UpdateWeatherMarkersAsync()
+    {
+        var markerList = new List<GoogleMapMarker>
+        {
+            GetRandomMarker(),
+            GetRandomMarker(),
+            GetRandomMarker(),
+            GetRandomMarker(),
+            GetRandomMarker(),
+            GetRandomMarker(),
+        };
+        await googleMapRef.UpdateMarkersAsync(markerList);
+    }
+
+    private async Task RefreshMapAsync()
+    {
+        markers.Add(GetRandomMarker());
+        markers.Add(GetRandomMarker());
+
+        await googleMapRef.RefreshAsync();
+    }
+
+    private void OnGoogleMapMarkerClick(GoogleMapMarker marker)
+    {
+        ToastService.Notify(new ToastMessage(ToastType.Success, $"{marker.Title}", $"This is a toast message for a weather forecast. DateTime: {DateTime.Now}"));
+    }
+
+    List<GoogleMapMarker> markers = new()
+    {
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement
+            {
+                Glyph = "bi bi-cloud-drizzle-fill fs-6 text-white",
+                UseIconFonts = true,
+                Background=ColorUtility.CategoricalSixColors[0].ToColor().ToRgbaString().ToLowerInvariant(),
+                BorderColor=ColorUtility.CategoricalSixColors[0].ToColor().ToRgbString().ToLowerInvariant()
+            },
+            Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352),
+            Title = "Drizzle",
+        },
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement
+            {
+                Glyph = "bi bi-cloud-drizzle-fill fs-6 text-white",
+                UseIconFonts = true,
+                Background=ColorUtility.CategoricalSixColors[0].ToColor().ToRgbaString().ToLowerInvariant(),
+                BorderColor=ColorUtility.CategoricalSixColors[0].ToColor().ToRgbString().ToLowerInvariant()
+            },
+            Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727),
+            Title = "Drizzle",
+        },
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement
+            {
+                Glyph = "bi bi-cloud-lightning-rain-fill fs-6 text-white",
+                UseIconFonts = true,
+                Background=ColorUtility.CategoricalSixColors[2].ToColor().ToRgbaString().ToLowerInvariant(),
+                BorderColor=ColorUtility.CategoricalSixColors[2].ToColor().ToRgbString().ToLowerInvariant()
+            },
+            Position = new GoogleMapMarkerPosition(37.39561833718522, -122.21855116258479),
+            Title = "Lightning rain",
+        },
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement
+            {
+                Glyph = "bi bi-cloud-lightning-rain-fill fs-6 text-white",
+                UseIconFonts = true,
+                Background=ColorUtility.CategoricalSixColors[2].ToColor().ToRgbaString().ToLowerInvariant(),
+                BorderColor=ColorUtility.CategoricalSixColors[2].ToColor().ToRgbString().ToLowerInvariant()
+            },
+            Position = new GoogleMapMarkerPosition(37.423928529779644, -122.1087629822001),
+            Title = "Lightning rain",
+        },
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement
+            {
+                Glyph = "bi bi-cloud-rain-fill fs-6 text-white",
+                UseIconFonts = true,
+                Background=ColorUtility.CategoricalSixColors[1].ToColor().ToRgbaString().ToLowerInvariant(),
+                BorderColor=ColorUtility.CategoricalSixColors[1].ToColor().ToRgbString().ToLowerInvariant()
+            },
+            Position = new GoogleMapMarkerPosition(37.40578635332598, -122.15043378466069),
+            Title = "Rain",
+        },
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement
+            {
+                Glyph = "bi bi-cloud-rain-fill fs-6 text-white",
+                UseIconFonts = true,
+                Background=ColorUtility.CategoricalSixColors[1].ToColor().ToRgbaString().ToLowerInvariant(),
+                BorderColor=ColorUtility.CategoricalSixColors[1].ToColor().ToRgbString().ToLowerInvariant()
+            },
+            Position = new GoogleMapMarkerPosition(37.36399747905774, -122.10465384268522),
+            Title = "Rain",
+        },
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement
+            {
+                Glyph = "bi bi-cloud-rain-heavy-fill fs-6 text-white",
+                UseIconFonts = true,
+                Background=ColorUtility.CategoricalSixColors[3].ToColor().ToRgbaString().ToLowerInvariant(),
+                BorderColor=ColorUtility.CategoricalSixColors[3].ToColor().ToRgbString().ToLowerInvariant()
+            },
+            Position = new GoogleMapMarkerPosition(37.38343706184458, -122.02340436985183),
+            Title = "Heavy rain",
+        }
+    };
+
+    private GoogleMapMarker GetRandomMarker()
+    {
+        var lat = Double.Parse($"37.{random.Next()}");
+        var lng = Double.Parse($"-122.{random.Next()}");
+        return new GoogleMapMarker()
+            {
+                PinElement = new PinElement
+                {
+                    Glyph = "bi bi-cloud-rain-heavy-fill fs-6 text-white",
+                    UseIconFonts = true,
+                    Background = ColorUtility.CategoricalTwelveColors[9].ToColor().ToRgbaString().ToLowerInvariant(),
+                    BorderColor = ColorUtility.CategoricalTwelveColors[9].ToColor().ToRgbString().ToLowerInvariant()
+                },
+                Position = new GoogleMapMarkerPosition(lat, lng),
+                Title = "Heavy rain",
+            };
+    }
+}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMap_Demo_08_Dynamic_markers_with_custom_clustering.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMap_Demo_08_Dynamic_markers_with_custom_clustering.razor
new file mode 100644
index 000000000..b329e1382
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMap_Demo_08_Dynamic_markers_with_custom_clustering.razor
@@ -0,0 +1,203 @@
+@inherits GoogleMapDemoComponentBase
+
+<div>
+    <Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="(async () => await AddWeatherMarkerAsync())">
+        <Icon Name="IconName.GeoAltFill" /> Add Marker
+    </Button>
+    <Button Color="ButtonColor.Danger" Size="ButtonSize.Small" @onclick="(async () => await UpdateWeatherMarkersAsync())">
+        <Icon Name="IconName.GeoAltFill" /> Update Markers
+    </Button>
+    <Button Color="ButtonColor.Warning" Size="ButtonSize.Small" @onclick="(async () => await RefreshMapAsync())">
+        <Icon Name="IconName.MapFill" /> Refresh Map
+    </Button>
+</div>
+
+<GoogleMap @ref="googleMapRef" 
+           ApiKey="@ApiKey"
+           Center="new GoogleMapCenter(37.43238031167444, -122.16795397128632)"
+           Height="400"
+           Width="100"
+           Zoom="10"
+           Markers="markers"
+           ClusterOptions="clusterOptions"
+           OnMarkerClick="OnGoogleMapMarkerClick"
+           OnClusterClick="OnGoogleMapClusterClick"/>
+
+@code {
+    Random random = new Random(2000000000);
+    GoogleMap googleMapRef = default!;
+    GoogleMapClusterOptions clusterOptions = new GoogleMapClusterOptions()
+    {
+        ClusteringEnabled = true,
+        EnableClusterClick = true,
+        Algorithm = new GoogleMapClusterAlgorithm
+        {
+            Type = GoogleMapAlgorithmTypes.SuperClusterAlgorithm.ToString(),
+            Options = new GoogleMapClusterAlgorithmOptions()
+            {
+                MaxZoom = 16,
+            }
+        },
+        Renderer = new GoogleMapClusterRenderer
+        {
+            TextColor = "#ff0000",
+            TextFontSize = "30px",
+            SvgIcon = @"<svg width='50px' height='50px' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='#000000' stroke-width='1' stroke-linecap='round' stroke-linejoin='miter'><circle cx='12' cy='12' r='10'></circle><circle cx='12' cy='12' r='10' fill='#059cf7' opacity='0.1'></circle></svg>",
+        }
+        
+    };
+    
+    [Inject] public ToastService ToastService { get; set; } = default!;
+    
+    private void OnGoogleMapClusterClick(GoogleMapClusterClickEvent clusterEvent)
+    {
+        var weatherTypes = clusterEvent.Markers
+            .Select(m => m.Title)
+            .GroupBy(title => title)
+            .Select(g => $"{g.Key}: {g.Count()}")
+            .ToList();
+
+        var summary = string.Join(", ", weatherTypes);
+        
+        ToastService.Notify(new ToastMessage(
+            ToastType.Info,
+            $"Cluster clicked: {clusterEvent.Markers.Count()} markers",
+            $"Weather summary: {summary}\nPosition: ({clusterEvent.Position.Latitude:F6}, {clusterEvent.Position.Longitude:F6})"
+        ));
+    }
+    
+    private async ValueTask AddWeatherMarkerAsync() => await googleMapRef.AddMarkerAsync(GetRandomMarker());
+
+    private async Task UpdateWeatherMarkersAsync()
+    {
+        var markerList = new List<GoogleMapMarker>
+        {
+            GetRandomMarker(),
+            GetRandomMarker(),
+            GetRandomMarker(),
+            GetRandomMarker(),
+            GetRandomMarker(),
+            GetRandomMarker(),
+        };
+        await googleMapRef.UpdateMarkersAsync(markerList);
+    }
+
+    private async Task RefreshMapAsync()
+    {
+        markers.Add(GetRandomMarker());
+        markers.Add(GetRandomMarker());
+
+        await googleMapRef.RefreshAsync();
+    }
+
+    private void OnGoogleMapMarkerClick(GoogleMapMarker marker)
+    {
+        ToastService.Notify(new ToastMessage(ToastType.Success, $"{marker.Title}", $"This is a toast message for a weather forecast. DateTime: {DateTime.Now}"));
+    }
+
+    List<GoogleMapMarker> markers = new()
+    {
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement
+            {
+                Glyph = "bi bi-cloud-drizzle-fill fs-6 text-white",
+                UseIconFonts = true,
+                Background=ColorUtility.CategoricalSixColors[0].ToColor().ToRgbaString().ToLowerInvariant(),
+                BorderColor=ColorUtility.CategoricalSixColors[0].ToColor().ToRgbString().ToLowerInvariant()
+            },
+            Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352),
+            Title = "Drizzle",
+        },
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement
+            {
+                Glyph = "bi bi-cloud-drizzle-fill fs-6 text-white",
+                UseIconFonts = true,
+                Background=ColorUtility.CategoricalSixColors[0].ToColor().ToRgbaString().ToLowerInvariant(),
+                BorderColor=ColorUtility.CategoricalSixColors[0].ToColor().ToRgbString().ToLowerInvariant()
+            },
+            Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727),
+            Title = "Drizzle",
+        },
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement
+            {
+                Glyph = "bi bi-cloud-lightning-rain-fill fs-6 text-white",
+                UseIconFonts = true,
+                Background=ColorUtility.CategoricalSixColors[2].ToColor().ToRgbaString().ToLowerInvariant(),
+                BorderColor=ColorUtility.CategoricalSixColors[2].ToColor().ToRgbString().ToLowerInvariant()
+            },
+            Position = new GoogleMapMarkerPosition(37.39561833718522, -122.21855116258479),
+            Title = "Lightning rain",
+        },
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement
+            {
+                Glyph = "bi bi-cloud-lightning-rain-fill fs-6 text-white",
+                UseIconFonts = true,
+                Background=ColorUtility.CategoricalSixColors[2].ToColor().ToRgbaString().ToLowerInvariant(),
+                BorderColor=ColorUtility.CategoricalSixColors[2].ToColor().ToRgbString().ToLowerInvariant()
+            },
+            Position = new GoogleMapMarkerPosition(37.423928529779644, -122.1087629822001),
+            Title = "Lightning rain",
+        },
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement
+            {
+                Glyph = "bi bi-cloud-rain-fill fs-6 text-white",
+                UseIconFonts = true,
+                Background=ColorUtility.CategoricalSixColors[1].ToColor().ToRgbaString().ToLowerInvariant(),
+                BorderColor=ColorUtility.CategoricalSixColors[1].ToColor().ToRgbString().ToLowerInvariant()
+            },
+            Position = new GoogleMapMarkerPosition(37.40578635332598, -122.15043378466069),
+            Title = "Rain",
+        },
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement
+            {
+                Glyph = "bi bi-cloud-rain-fill fs-6 text-white",
+                UseIconFonts = true,
+                Background=ColorUtility.CategoricalSixColors[1].ToColor().ToRgbaString().ToLowerInvariant(),
+                BorderColor=ColorUtility.CategoricalSixColors[1].ToColor().ToRgbString().ToLowerInvariant()
+            },
+            Position = new GoogleMapMarkerPosition(37.36399747905774, -122.10465384268522),
+            Title = "Rain",
+        },
+        new GoogleMapMarker()
+        {
+            PinElement = new PinElement
+            {
+                Glyph = "bi bi-cloud-rain-heavy-fill fs-6 text-white",
+                UseIconFonts = true,
+                Background=ColorUtility.CategoricalSixColors[3].ToColor().ToRgbaString().ToLowerInvariant(),
+                BorderColor=ColorUtility.CategoricalSixColors[3].ToColor().ToRgbString().ToLowerInvariant()
+            },
+            Position = new GoogleMapMarkerPosition(37.38343706184458, -122.02340436985183),
+            Title = "Heavy rain",
+        }
+    };
+
+    private GoogleMapMarker GetRandomMarker()
+    {
+        var lat = Double.Parse($"37.{random.Next()}");
+        var lng = Double.Parse($"-122.{random.Next()}");
+        return new GoogleMapMarker()
+            {
+                PinElement = new PinElement
+                {
+                    Glyph = "bi bi-cloud-rain-heavy-fill fs-6 text-white",
+                    UseIconFonts = true,
+                    Background = ColorUtility.CategoricalTwelveColors[9].ToColor().ToRgbaString().ToLowerInvariant(),
+                    BorderColor = ColorUtility.CategoricalTwelveColors[9].ToColor().ToRgbString().ToLowerInvariant()
+                },
+                Position = new GoogleMapMarkerPosition(lat, lng),
+                Title = "Heavy rain",
+            };
+    }
+}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.WebAssembly/wwwroot/index.html b/BlazorBootstrap.Demo.WebAssembly/wwwroot/index.html
index dbbab8bcd..23770818c 100644
--- a/BlazorBootstrap.Demo.WebAssembly/wwwroot/index.html
+++ b/BlazorBootstrap.Demo.WebAssembly/wwwroot/index.html
@@ -57,6 +57,8 @@
     <script src="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" integrity="sha512-7Z9J3l1+EYfeaPKcGXu3MS/7T+w19WtKQY/n+xzmw4hZhJ9tyYmcUS+4QqAlzhicE5LAfMQSF3iFTK9bQdTxXg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-SkmBfuA2hqjzEVpmnMt/LINrjop3GKWqsuLSSB3e7iBmYK7JuWw4ldmmxwD9mdm2IRTTi0OxSAfEGvgEi0i2Kw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <!-- Add markerclusterer to the Google Maps API -->
+    <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/custom-class/prism-custom-class.min.js" integrity="sha512-7uKPAecn+SrAT5xVovlVdFCkXTM9LzNzjaK3yzb3ht22SwjnUTjWHNAp7dq3OPFmPb+DCAFjWnDT8Qrf256GeQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="_content/BlazorBootstrap.Demo.RCL/js/blazorbootstrap.demo.rcl.js" asp-append-version="true"></script>
     <script>
diff --git a/blazorbootstrap/BlazorBootstrap.csproj b/blazorbootstrap/BlazorBootstrap.csproj
index 4c3607f9c..5addcaca7 100644
--- a/blazorbootstrap/BlazorBootstrap.csproj
+++ b/blazorbootstrap/BlazorBootstrap.csproj
@@ -56,4 +56,21 @@
     <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="9.0.0" />
   </ItemGroup>
 
+  <ItemGroup>
+    <None Include="wwwroot\**\*">
+      <Pack>true</Pack>
+      <PackagePath>wwwroot</PackagePath>
+    </None>
+
+    <Content Update="wwwroot\**\*">
+      <Pack>true</Pack>
+      <PackagePath>staticwebassets</PackagePath>
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+  </ItemGroup>
+
+  <Target Name="CopyAssets" BeforeTargets="Pack">
+    <Copy SourceFiles="wwwroot\blazor.bootstrap.js"
+          DestinationFolder="$(OutDir)wwwroot" />
+  </Target>
 </Project>
\ No newline at end of file
diff --git a/blazorbootstrap/Components/Maps/GoogleMap.razor.cs b/blazorbootstrap/Components/Maps/GoogleMap.razor.cs
index 90613c4b5..3e6eca80e 100644
--- a/blazorbootstrap/Components/Maps/GoogleMap.razor.cs
+++ b/blazorbootstrap/Components/Maps/GoogleMap.razor.cs
@@ -35,6 +35,13 @@ public async Task OnMarkerClickJS(GoogleMapMarker marker)
         if (OnMarkerClick.HasDelegate)
             await OnMarkerClick.InvokeAsync(marker);
     }
+    
+    [JSInvokable]
+    public async Task OnClusterClickJS(GoogleMapClusterClickEvent clusterEvent)
+    {
+        if (OnClusterClick.HasDelegate)
+            await OnClusterClick.InvokeAsync(clusterEvent);
+    }
 
     /// <summary>
     /// Refreshes the Google Map component.
@@ -42,7 +49,7 @@ public async Task OnMarkerClickJS(GoogleMapMarker marker)
     /// <returns>A completed task.</returns>
     public ValueTask RefreshAsync()
     {
-        JSRuntime.InvokeVoidAsync("window.blazorBootstrap.googlemaps.initialize", Id, Zoom, Center, Markers, Clickable, objRef);
+        JSRuntime.InvokeVoidAsync("window.blazorBootstrap.googlemaps.initialize", Id, Zoom, Center, Markers, Clickable, ClusterOptions, MapControls, MapId, objRef);
 
         return ValueTask.CompletedTask;
     }
@@ -60,7 +67,7 @@ public ValueTask UpdateMarkersAsync(IEnumerable<GoogleMapMarker> markers)
 
     private void OnScriptLoad()
     {
-        Task.Run(async () => await JSRuntime.InvokeVoidAsync("window.blazorBootstrap.googlemaps.initialize", Id, Zoom, Center, Markers, Clickable, objRef));
+        Task.Run(async () => await JSRuntime.InvokeVoidAsync("window.blazorBootstrap.googlemaps.initialize", Id, Zoom, Center, Markers, Clickable, ClusterOptions, MapControls, MapId, objRef));
     }
 
     #endregion
@@ -74,6 +81,12 @@ private void OnScriptLoad()
             ($"height:{Height!.Value.ToString(CultureInfo.InvariantCulture)}{HeightUnit.ToCssString()}", Height is not null && Height.Value > 0)
         );
 
+    /// <summary>
+    /// Gets or sets the Google Map ID. It essentially allows for custom styled maps from Google Maps Platforms, see: https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over
+    /// </summary>
+    [Parameter]
+    public string? MapId { get; set; }
+    
     /// <summary>
     /// Gets or sets the Google Map API key.
     /// </summary>
@@ -92,7 +105,7 @@ private void OnScriptLoad()
     [Parameter] 
     public bool Clickable { get; set; }
 
-    private string? GoogleMapsJsFileUrl => $"https://maps.googleapis.com/maps/api/js?key={ApiKey}&libraries=maps,marker";
+    private string? GoogleMapsJsFileUrl => $"https://maps.googleapis.com/maps/api/js?key={ApiKey}&libraries=maps,marker{(MapId != null ? $"&map_ids={MapId}" : "")}";
 
     /// <summary>
     /// Gets or sets the height of the <see cref="GoogleMap" />.
@@ -152,5 +165,26 @@ private void OnScriptLoad()
     [Parameter]
     public int Zoom { get; set; } = 14;
 
+    /// <summary>
+    /// Gets or sets the clustering options for the map.
+    /// </summary>
+    [Parameter]
+    public GoogleMapClusterOptions? ClusterOptions { get; set; } = new();
+
+    /// <summary>
+    /// Event fired when a user clicks on a cluster.
+    /// This event fires only when EnableClustering is true and ClusterOptions.EnableClusterClick is true.
+    /// </summary>
+    [Parameter]
+    public EventCallback<GoogleMapClusterClickEvent> OnClusterClick { get; set; }
+
+    /// <summary>
+    /// Decides which controls to show on the map.
+    /// </summary>
+    /// <remarks>
+    /// Full is the default value, which enables both street view and zoom controls.
+    /// </remarks>
+    [Parameter]
+    public GoogleMapControls MapControls { get; set; } = GoogleMapControls.Full;
     #endregion
 }
diff --git a/blazorbootstrap/Enums/GoogleMapAlgorithmTypes.cs b/blazorbootstrap/Enums/GoogleMapAlgorithmTypes.cs
new file mode 100644
index 000000000..80a3a6fad
--- /dev/null
+++ b/blazorbootstrap/Enums/GoogleMapAlgorithmTypes.cs
@@ -0,0 +1,7 @@
+namespace BlazorBootstrap;
+    public enum GoogleMapAlgorithmTypes
+    {
+        NoopAlgorithm,
+        GridAlgorithm,
+        SuperClusterAlgorithm
+    }
\ No newline at end of file
diff --git a/blazorbootstrap/Enums/GoogleMapControls.cs b/blazorbootstrap/Enums/GoogleMapControls.cs
new file mode 100644
index 000000000..a341ace67
--- /dev/null
+++ b/blazorbootstrap/Enums/GoogleMapControls.cs
@@ -0,0 +1,21 @@
+namespace BlazorBootstrap;
+
+public enum GoogleMapControls
+{
+    /// <summary>
+    /// Enables both zoom and street view controls.
+    /// </summary>
+    Full,
+    /// <summary>
+    /// Removes the zoom controls, but keeps the street view control.
+    /// </summary>
+    NoZoom,
+    /// <summary>
+    /// Removes street view controls, but keeps the zoom control.
+    /// </summary>
+    NoStreetView,
+    /// <summary>
+    /// Removes all controls entirely, including zoom and street view.
+    /// </summary>
+    NoZoomAndStreetView,
+}
\ No newline at end of file
diff --git a/blazorbootstrap/Models/Maps/GoogleMapClusterOptions.cs b/blazorbootstrap/Models/Maps/GoogleMapClusterOptions.cs
new file mode 100644
index 000000000..efb9bc642
--- /dev/null
+++ b/blazorbootstrap/Models/Maps/GoogleMapClusterOptions.cs
@@ -0,0 +1,60 @@
+namespace BlazorBootstrap
+{
+    /// <summary>
+    /// Represents the options for clustering markers on a Google Map.
+    /// To enable clustering, set <see cref="ClusteringEnabled"/> to <c>true</c>.
+    /// </summary>
+    /// <remarks>
+    /// Default value for <see cref="ClusteringEnabled"/> is <c>false</c>.
+    /// </remarks>
+    public class GoogleMapClusterOptions
+    {
+        public GoogleMapClusterRenderer? Renderer { get; set; }
+        public GoogleMapClusterAlgorithm? Algorithm { get; set; }
+        public bool ClusteringEnabled { get; set; } = false; 
+        public bool EnableClusterClick { get; set; }
+    }
+
+    /// <summary>
+    /// Makes it possible to change the Cluster Algorithms, by changing type or the zoom level under options.
+    /// </summary>
+    public class GoogleMapClusterAlgorithm
+    {
+        public string Type { get; set; } = GoogleMapAlgorithmTypes.SuperClusterAlgorithm.ToString();
+        public GoogleMapClusterAlgorithmOptions Options { get; set; } = new();
+    }
+    
+    /// <summary>
+    /// Currently only has MaxZoom, but can be expanded with more options in the future.
+    /// </summary>
+    public class GoogleMapClusterAlgorithmOptions
+    {
+        public int? MaxZoom { get; set; } = 16;
+    }
+    
+    /// <summary>
+    /// Cluster renderer for Google Maps. Be aware that the properties only applies if you have a custom SVG icon.
+    /// </summary>
+    /// <remarks>
+    /// ShowMarkerCount is set to true by default.
+    /// </remarks>
+    public class GoogleMapClusterRenderer
+    {
+        // Properties for the cluster count
+        public string? TextColor { get; set; }
+        public string? TextFontSize { get; set; }
+        public bool ShowMarkerCount { get; set; } = true;
+        // Properties for the cluster icon
+        public string? SvgIcon { get; set; }
+        
+    }
+    
+    /// <summary>
+    /// Defines the event arguments when the user clicks on a cluster.
+    /// </summary>
+    public class GoogleMapClusterClickEvent
+    {
+        public GoogleMapMarkerPosition Position { get; set; } = default!;
+        public IEnumerable<GoogleMapMarker> Markers { get; set; } = default!;
+    }
+}
\ No newline at end of file
diff --git a/blazorbootstrap/Models/Maps/GoogleMapMarker.cs b/blazorbootstrap/Models/Maps/GoogleMapMarker.cs
index abd68296a..5947e3810 100644
--- a/blazorbootstrap/Models/Maps/GoogleMapMarker.cs
+++ b/blazorbootstrap/Models/Maps/GoogleMapMarker.cs
@@ -14,5 +14,10 @@ public class GoogleMapMarker
     [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] 
     public string? Title { get; set; }
 
+    /// <summary>
+    /// Variable for disabling info windows on the maps
+    /// </summary>
+    public bool DisableInfoWindow { get; set; } = false;
+
     #endregion
 }
diff --git a/blazorbootstrap/wwwroot/blazor.bootstrap.css b/blazorbootstrap/wwwroot/blazor.bootstrap.css
index 9551b0072..ac7491f2f 100644
--- a/blazorbootstrap/wwwroot/blazor.bootstrap.css
+++ b/blazorbootstrap/wwwroot/blazor.bootstrap.css
@@ -189,6 +189,13 @@ table button.dropdown-toggle.bb-grid-filter::after {
     padding: .375rem;
 }
 
+/* google maps */
+.bb-googlemaps-marker-fix {
+    position: absolute;
+    transform: translate(-50%, -50%);
+}
+
+
 /* grid - fixed header */
 .bb-table {
     /* NOTE: intentionally overriding the behavior */
@@ -638,3 +645,5 @@ main {
     color: var(--bs-link-hover-color);
     text-decoration: underline;
 }
+
+
diff --git a/blazorbootstrap/wwwroot/blazor.bootstrap.js b/blazorbootstrap/wwwroot/blazor.bootstrap.js
index d0a59ddc9..6e9b6adb0 100644
--- a/blazorbootstrap/wwwroot/blazor.bootstrap.js
+++ b/blazorbootstrap/wwwroot/blazor.bootstrap.js
@@ -474,6 +474,13 @@ window.blazorBootstrap = {
                 else if (marker.content) {
                     _content = document.createElement("div");
                     _content.classList.add("bb-google-marker-content");
+
+                    // fixes SVG misalignment on zoom out - Adlei
+                    const hasSVG = marker.content.includes('<svg');
+                    if (hasSVG) {
+                        _content.classList.add("bb-googlemaps-marker-fix");
+                    }
+                    
                     _content.innerHTML = marker.content;
                 }
 
@@ -491,58 +498,240 @@ window.blazorBootstrap = {
                 if (clickable) {
                     markerEl.addListener("click", ({ domEvent, latLng }) => {
                         const { target } = domEvent;
-                        const infoWindow = new google.maps.InfoWindow();
-                        infoWindow.close();
-                        infoWindow.setContent(markerEl.title);
-                        infoWindow.open(markerEl.map, markerEl);
+                        
+                        // Disables info window, but enables clicking
+                        if(!marker.disableInfoWindow) {
+                            const infoWindow = new google.maps.InfoWindow();
+                            infoWindow.close();
+                            infoWindow.setContent(markerEl.title);
+                            infoWindow.open(markerEl.map, markerEl);
+                        }
                         dotNetHelper.invokeMethodAsync('OnMarkerClickJS', marker);
                     });
                 }
+                if (mapInstance.markerCluster) {
+                    const markers = mapInstance.markerCluster.markers;
+                    const markerExists = markers.includes(markerEl);
+
+                    if (!markerExists) {
+                        mapInstance.markerCluster.addMarker(markerEl);
+                    } else {
+                        mapInstance.markerCluster.render();
+                    }
+                }
+                
             }
         },
-        create: (elementId, map, zoom, center, markers, clickable) => {
+        create: (elementId, map, zoom, center, markers, clickable, clusterOptions) => {
             window.blazorBootstrap.googlemaps.instances[elementId] = {
                 map: map,
                 zoom: zoom,
                 center: center,
                 markers: markers,
-                clickable: clickable
+                clickable: clickable,
+                clusterOptions: clusterOptions,
             };
         },
         get: (elementId) => {
             return window.blazorBootstrap.googlemaps.instances[elementId];
         },
-        initialize: (elementId, zoom, center, markers, clickable, dotNetHelper) => {
-            window.blazorBootstrap.googlemaps.markerEls[elementId] = window.blazorBootstrap.googlemaps.markerEls[elementId] ?? [];
-
-            let mapOptions = { center: center, zoom: zoom, mapId: elementId };
+        initialize: (elementId, zoom, center, markers, clickable, clusterOptions, mapControls, mapId, dotNetHelper) => {
+            window.blazorBootstrap.googlemaps.markerEls[elementId] ??= [];
+            let id = elementId;
+            
+            // in case a person wants to use a custom map
+            if(mapId) 
+                id = mapId;
+
+            // get the controls configuration based on the enum
+            const controlsConfig = window.blazorBootstrap.googlemaps.getMapControlsConfig(mapControls);
+            
+            let mapOptions = { center: center, zoom: zoom, mapId: id, ...controlsConfig };
             let map = new google.maps.Map(document.getElementById(elementId), mapOptions);
 
-            window.blazorBootstrap.googlemaps.create(elementId, map, zoom, center, markers, clickable);
+            window.blazorBootstrap.googlemaps.create(elementId, map, zoom, center, markers, clickable, clusterOptions);
 
-            if (markers) {
+            // clean up just the clustering if it exists
+            const existingInstance = window.blazorBootstrap.googlemaps.get(elementId);
+            if (existingInstance?.markerCluster) {
+                existingInstance.markerCluster.setMap(null);
+                existingInstance.markerCluster = null;
+            }
+
+            // don't recreate markers if they already exist
+            if (markers && window.blazorBootstrap.googlemaps.markerEls[elementId].length === 0) {
                 for (const marker of markers) {
                     window.blazorBootstrap.googlemaps.addMarker(elementId, marker, dotNetHelper);
                 }
             }
+            
+            // add clustering if enabled, if not keep the markers as it is
+            if(clusterOptions?.clusteringEnabled) {
+                const mapInstance = window.blazorBootstrap.googlemaps.get(elementId);
+                const clusterConfig = {
+                    map: map,
+                    markers: window.blazorBootstrap.googlemaps.markerEls[elementId]
+                };
+                
+                
+                if (clusterOptions?.renderer) {
+                    clusterConfig.renderer = {
+                        render: ({ count, position }) => {
+                            // Create custom marker element
+                            const div = document.createElement("div");
+                            if (clusterOptions.renderer.svgIcon) {
+                                const countStyle = `position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)` +
+                                    (clusterOptions.renderer.textColor ? `;color:${clusterOptions.renderer.textColor}` : '') +
+                                    (clusterOptions.renderer.textFontSize ? `;font-size:${clusterOptions.renderer.textFontSize}` : '');
+
+                                div.innerHTML = `
+                                    <div style="position:relative;">
+                                        <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)">${clusterOptions.renderer.svgIcon}</div>
+                                        ${clusterOptions.renderer.showMarkerCount ? `<div style="${countStyle}">${count}</div>` : ''}
+                                    </div>`;
+                            }
+                            // Return as an advanced marker element
+                            return new google.maps.marker.AdvancedMarkerElement({
+                                position,
+                                content: div
+                            });
+                        }
+                    };
+                }
+                if (clusterOptions?.algorithm) {
+                    clusterConfig.algorithm = new markerClusterer[clusterOptions.algorithm.type]({
+                        ...clusterOptions.algorithm.options
+                    });
+                }
+                // set marker cluster to the instance with the configuration
+                mapInstance.markerCluster = new markerClusterer.MarkerClusterer(clusterConfig);
+
+                if (clusterOptions?.enableClusterClick) {
+                    mapInstance.markerCluster.addListener("click", (cluster) => {
+                        dotNetHelper.invokeMethodAsync('OnClusterClickJS', {
+                            position: cluster.position,
+                            markers: cluster.markers.map(m => ({
+                                position: m.position,
+                                title: m.title
+                            }))
+                        });
+                    });
+                }
+                
+                
+            } else {
+                window.blazorBootstrap.googlemaps.markerEls[elementId].forEach(marker => {
+                    marker.map = map;
+                });
+            }
         },
         instances: {},
         markerEls: {},
         updateMarkers: (elementId, markers, dotNetHelper) => {
+            const mapInstance = window.blazorBootstrap.googlemaps.get(elementId);
             let markerEls = window.blazorBootstrap.googlemaps.markerEls[elementId] ?? [];
+            const clusterOptions = mapInstance.clusterOptions;
+
+            // clean up existing cluster
+            if (mapInstance.markerCluster) {
+                mapInstance.markerCluster.clearMarkers();
+                mapInstance.markerCluster.setMap(null);
+            }
+            
+            // clean up old and keep already existing markers
+            markerEls = markerEls.filter(existing => {
+                const shouldKeep = markers?.some(m => m.title === existing.title && m.pinElement === existing.pinElement);
+                if (!shouldKeep) existing.map = null;
+                return shouldKeep;
+            });
+            window.blazorBootstrap.googlemaps.markerEls[elementId] = markerEls;
+
+            // add only new markers
+            markers?.forEach(marker => {
+                if (!markerEls.some(m => m.title === marker.title && m.pinElement === marker.pinElement))
+                    window.blazorBootstrap.googlemaps.addMarker(elementId, marker, dotNetHelper);
+            });
+
+            if (clusterOptions?.clusteringEnabled) {
+                const clusterConfig = {
+                    map: mapInstance.map,
+                    markers: window.blazorBootstrap.googlemaps.markerEls[elementId]
+                };
 
-            // delete the markers
-            if (markerEls.length > 0) {
-                for (const markerEl of markerEls) {
-                    markerEl.setMap(null);
+                // add renderer if configured
+                if (clusterOptions.renderer) {
+                    clusterConfig.renderer = {
+                        render: ({ count, position }) => {
+                            const div = document.createElement("div");
+                            if (clusterOptions.renderer.svgIcon) {
+                                const countStyle = `position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)` +
+                                    (clusterOptions.renderer.textColor ? `;color:${clusterOptions.renderer.textColor}` : '') +
+                                    (clusterOptions.renderer.textFontSize ? `;font-size:${clusterOptions.renderer.textFontSize}` : '');
+
+                                div.innerHTML = `
+                            <div style="position:relative;">
+                                <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)">${clusterOptions.renderer.svgIcon}</div>
+                                ${clusterOptions.renderer.showMarkerCount ? `<div style="${countStyle}">${count}</div>` : ''}
+                            </div>`;
+                            }
+                            return new google.maps.marker.AdvancedMarkerElement({ position, content: div });
+                        }
+                    };
                 }
-            }
 
-            if (markers) {
-                for (const marker of markers) {
-                    window.blazorBootstrap.googlemaps.addMarker(elementId, marker, dotNetHelper);
+                // add algorithm if configured
+                if (clusterOptions.algorithm) {
+                    clusterConfig.algorithm = new markerClusterer[clusterOptions.algorithm.type]({
+                        ...clusterOptions.algorithm.options
+                    });
                 }
+
+                // create cluster and add click handler
+                mapInstance.markerCluster = new markerClusterer.MarkerClusterer(clusterConfig);
+
+                if (clusterOptions.enableClusterClick) {
+                    mapInstance.markerCluster.addListener("click", (cluster) => {
+                        dotNetHelper.invokeMethodAsync('OnClusterClickJS', {
+                            position: cluster.position,
+                            markers: cluster.markers.map(m => ({ position: m.position, title: m.title }))
+                        });
+                    });
+                }
+            }
+        },
+        getMapControlsConfig: (mapControls) => {
+            // Default configuration - everything enabled
+            let controlsConfig = {
+                streetViewControl: true,
+                zoomControl: true,
+                disableDefaultUI: false
+            };
+
+            switch (mapControls) {
+                case 0: // Full
+                    // Default config is already set up for Full
+                    break;
+
+                case 1: // NoZoom
+                    controlsConfig.zoomControl = false;
+                    controlsConfig.disableDefaultUI = true;
+                    controlsConfig.streetViewControl = true;
+                    break;
+
+                case 2: // NoStreetView
+                    controlsConfig.streetViewControl = false;
+                    controlsConfig.disableDefaultUI = true;
+                    controlsConfig.zoomControl = true;
+                    break;
+
+                case 3: // NoZoomAndStreetView
+                    controlsConfig.streetViewControl = false;
+                    controlsConfig.zoomControl = false;
+                    controlsConfig.disableDefaultUI = true;
+                    break;
             }
+
+            return controlsConfig;
         }
     },
     grid: {