diff --git a/blazorbootstrap/Components/Maps/GoogleMap.razor.cs b/blazorbootstrap/Components/Maps/GoogleMap.razor.cs index ced5f448e..2adc4ac19 100644 --- a/blazorbootstrap/Components/Maps/GoogleMap.razor.cs +++ b/blazorbootstrap/Components/Maps/GoogleMap.razor.cs @@ -17,6 +17,11 @@ protected override async Task OnInitializedAsync() await base.OnInitializedAsync(); } + /// + /// Adds a marker to the GoogleMap. + /// + /// The marker to add to the map. + /// A completed task. public ValueTask AddMarkerAsync(GoogleMapMarker marker) { JSRuntime.InvokeVoidAsync("window.blazorBootstrap.googlemaps.addMarker", Id, marker, objRef); @@ -31,6 +36,10 @@ public async Task OnMarkerClickJS(GoogleMapMarker marker) await OnMarkerClick.InvokeAsync(marker); } + /// + /// Refreshes the Google Maps component. + /// + /// A completed task. public ValueTask RefreshAsync() { JSRuntime.InvokeVoidAsync("window.blazorBootstrap.googlemaps.initialize", Id, Zoom, Center, Markers, Clickable, objRef); @@ -38,6 +47,10 @@ public ValueTask RefreshAsync() return ValueTask.CompletedTask; } + /// + /// Updates the markers on the Google Map. + /// + /// A completed task. public ValueTask UpdateMarkersAsync(IEnumerable markers) { JSRuntime.InvokeVoidAsync("window.blazorBootstrap.googlemaps.updateMarkers", Id, markers, objRef); diff --git a/docs/docs/05-components/google-map.mdx b/docs/docs/05-components/google-map.mdx new file mode 100644 index 000000000..e653e29f9 --- /dev/null +++ b/docs/docs/05-components/google-map.mdx @@ -0,0 +1,783 @@ +--- +title: Blazor Google Map Component +description: Blazor Bootstrap Google Map component will create maps to show locations anywhere in the world using the Google JavaScript API. +image: https://i.imgur.com/beAr31J.png + +sidebar_label: Google Maps +sidebar_position: 12 +--- + +import CarbonAd from '/carbon-ad.mdx' + +# Blazor Google Map + +Blazor Bootstrap Google Map component will create maps to show locations anywhere in the world using the Google JavaScript API. + + + +Blazor Bootstrap: Google Map component + +## Prerequisite + +Before you start using the GoogleMap component in your project, you need an API key. +Please follow the link below for detailed steps.
+**Link:** https://developers.google.com/maps/documentation/javascript/adding-a-google-map#key. + +## Parameters + +| Name | Type | Default | Required | Description | Added Version | +|:--|:--|:--|:--|:--|:--| +| ApiKey | `string?` | null | ✔️ | Gets or sets the Google Maps API key. | 3.0.0 | +| Center | `GoogleMapCenter` | null | | Gets or sets the center parameter. | 3.0.0 | +| Clickable | bool | false | | Makes the marker clickable if set to `true`. | 3.0.0 | +| Height | `double?` | null | | Gets or sets the height of the `GoogleMap`. | 3.0.0 | +| HeightUnit | `Unit` | `Unit.Px` | | Gets or sets the units for the `Height`. | 3.0.0 | +| Markers | `IEnumerable?` | null | ✔️ | Gets or sets the markers. | 3.0.0 | +| Width | `double?` | null | | Gets or sets the width of the `GoogleMap`. | 3.0.0 | +| WidthUnit | `Unit` | `Unit.Px` | | Gets or sets the units for the `Width`. | 3.0.0 | +| Zoom | int | 14 | | Gets or sets the zoom level of the `GoogleMap`. | 3.0.0 | + +## Methods + +| Name | Description | Added Version | +|:--|:--|:--| +| AddMarkerAsync(GoogleMapMarker marker) | Adds a marker to the GoogleMap. | 3.0.0 | +| RefreshAsync() | Refreshes the Google Maps component. | 3.0.0 | +| UpdateMarkersAsync(`IEnumerable` markers) | Updates the markers on the Google Map. | 3.0.0 | + +## Callback Events + +| Name | Description | Added Version | +|:--|:--|:--| +| OnMarkerClick | Event fired when a user clicks on a marker. This event fires only when **Clickable** is set to **true**. | 3.0.0 | + +## Examples + +This example demonstrates how to use a simple Google Maps component. + +Blazor Bootstrap: Google Map Component - Examples + +```cshtml {} showLineNumbers +@inherits GoogleMapDemoComponentBase + + +``` + +[See demo here](https://demos.blazorbootstrap.com/google-maps#examples) + +### Add a marker to a map + +This example demonstrates how to use a simple Google Maps component with marker. + +Blazor Bootstrap: Google Map Component - Add a marker to a map + +```cshtml {} showLineNumbers +@inherits GoogleMapDemoComponentBase + + +``` + +```cs {} showLineNumbers +@code { + List markers = new() + { + new GoogleMapMarker() + { + Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352) , + Title = "Single family house with modern design", + }, + new GoogleMapMarker() + { + Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727) , + Title = "Townhouse with friendly neighbors", + } + }; +} +``` + +[See demo here](https://demos.blazorbootstrap.com/google-maps#add-a-marker-to-a-map) + +### Marker customization + +### Scale the marker + +To scale a marker, use the **PinElement.Scale** option. + +Blazor Bootstrap: Google Map Component - Scale the marker + +```cshtml {} showLineNumbers +@inherits GoogleMapDemoComponentBase + + +``` + +```cs {} showLineNumbers +@code { + List markers = new() + { + new GoogleMapMarker() + { + PinElement = new PinElement{ Scale = 1.5 }, + Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352) , + Title = "Single family house with modern design", + }, + new GoogleMapMarker() + { + PinElement = new PinElement{ Scale = 1.5 }, + Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727) , + Title = "Townhouse with friendly neighbors", + } + }; +} +``` + +[See demo here](https://demos.blazorbootstrap.com/google-maps#scale-the-marker) + +### Change the background color + +Use the **PinElement.Background** option to change the background color of a marker. + +Blazor Bootstrap: Google Map Component - Change the background color + +```cshtml {} showLineNumbers +@inherits GoogleMapDemoComponentBase + + +``` + +```cs {} showLineNumbers +@code { + List markers = new() + { + new GoogleMapMarker() + { + PinElement = new PinElement{ Background = "#FBBC04", }, + Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352) , + Title = "Single family house with modern design", + }, + new GoogleMapMarker() + { + PinElement = new PinElement{ Background = "#FBBC04", }, + Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727) , + Title = "Townhouse with friendly neighbors", + } + }; +} +``` + +[See demo here](https://demos.blazorbootstrap.com/google-maps#change-the-background-color) + +### Change the border color + +Use the **PinElement.BorderColor** option to change the border color of a marker. + +Blazor Bootstrap: Google Map Component - Change the border color + +```cshtml {} showLineNumbers +@inherits GoogleMapDemoComponentBase + + +``` + +```cs {} showLineNumbers +@code { + List markers = new() + { + new GoogleMapMarker() + { + PinElement = new PinElement{ BorderColor = "#137333", }, + Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352) , + Title = "Single family house with modern design", + }, + new GoogleMapMarker() + { + PinElement = new PinElement{ BorderColor = "#137333", }, + Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727) , + Title = "Townhouse with friendly neighbors", + } + }; +} +``` + +[See demo here](https://demos.blazorbootstrap.com/google-maps#change-the-border-color) + +### Change the glyph color + +Use the **PinElement.GlyphColor** option to change the glyph color of a marker. + +Blazor Bootstrap: Google Map Component - Change the glyph color + +```cshtml {} showLineNumbers +@inherits GoogleMapDemoComponentBase + + +``` + +```cs {} showLineNumbers +@code { + List markers = new() + { + new GoogleMapMarker() + { + PinElement = new PinElement{ GlyphColor = "white", }, + Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352) , + Title = "Single family house with modern design", + }, + new GoogleMapMarker() + { + PinElement = new PinElement{ GlyphColor = "white", }, + Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727) , + Title = "Townhouse with friendly neighbors", + } + }; +} +``` + +[See demo here](https://demos.blazorbootstrap.com/google-maps#change-the-glyph-color) + +### Hide the glyph + +Set the **PinElement.Glyph** option to an empty string to hide a marker's glyph. + +Blazor Bootstrap: Google Map Component - Hide the glyph + +```cshtml {} showLineNumbers +@inherits GoogleMapDemoComponentBase + + +``` + +```cs {} showLineNumbers +@code { + List markers = new() + { + new GoogleMapMarker() + { + PinElement = new PinElement{ Glyph = "", }, + Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352) , + Title = "Single family house with modern design", + }, + new GoogleMapMarker() + { + PinElement = new PinElement{ Glyph = "", }, + Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727) , + Title = "Townhouse with friendly neighbors", + } + }; +} +``` + +[See demo here](https://demos.blazorbootstrap.com/google-maps#hide-the-glyph) + +### Use icon fonts + +Use the **PinElement.UseIconFonts** and **PinElement.Glyph** options to use the icon fonts. + +Blazor Bootstrap: Google Map Component - Use icon fonts + +```cshtml {} showLineNumbers +@inherits GoogleMapDemoComponentBase + + +``` + +```cs {} showLineNumbers +@code { + List 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", + }, + 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.34576403052, -122.04455090047453), + Title = "Heavy rain", + } + }; +} +``` + +[See demo here](https://demos.blazorbootstrap.com/google-maps#use-icon-fonts) + +### Markers with HTML and CSS + +Blazor Bootstrap: Google Map Component - Markers with HTML and CSS + +```cshtml {} showLineNumbers +@inherits GoogleMapDemoComponentBase + + +``` + +```cs {} showLineNumbers +@code { + List markers = new() + { + new GoogleMapMarker() + { + Content = "", + Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352), + Title = "Drizzle" + }, + new GoogleMapMarker() + { + Content = "", + Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727), + Title = "Lightning rain" + }, + new GoogleMapMarker() + { + Content = "", + Position = new GoogleMapMarkerPosition(37.39561833718522, -122.21855116258479), + Title = "Rain" + } + }; +} +``` + +[See demo here](https://demos.blazorbootstrap.com/google-maps#markers-with-html-and-css) + +### Make a marker clickable + +This example shows you how to make markers respond to click events. To make a marker clickable: Set the **Clickable** parameter to **true**. + +Blazor Bootstrap: Google Map Component - Make a marker clickable + +```cshtml {} showLineNumbers +@inherits GoogleMapDemoComponentBase + + +``` + +```cs {} showLineNumbers +@code { + [Inject] public ToastService ToastService { get; set; } = default!; + + 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 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", + }, + 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.34576403052, -122.04455090047453), + Title = "Heavy rain", + } + }; +} +``` + +[See demo here](https://demos.blazorbootstrap.com/google-maps#make-a-marker-clickable) + +### Dynamic markers + +**Add marker** + +Blazor Bootstrap: Google Map Component - Dynamic markers - Add marker + +**Update markers** + +Blazor Bootstrap: Google Map Component - Dynamic markers - Update markers + +```cshtml {} showLineNumbers +@inherits GoogleMapDemoComponentBase + +
+ + + +
+ + +``` + +```cs {} showLineNumbers +@code { + Random random = new Random(2000000000); + GoogleMap googleMapRef = default!; + + [Inject] public ToastService ToastService { get; set; } = default!; + + private async ValueTask AddWeatherMarkerAsync() => await googleMapRef.AddMarkerAsync(GetRandomMarker()); + + private async Task UpdateWeatherMarkersAsync() + { + var markerList = new List + { + 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 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", + }; + } +} +``` + +[See demo here](https://demos.blazorbootstrap.com/google-maps#dynamic-markers) diff --git a/docs/docs/05-components/grid.mdx b/docs/docs/05-components/grid.mdx index bffbd1944..cb8ece7af 100644 --- a/docs/docs/05-components/grid.mdx +++ b/docs/docs/05-components/grid.mdx @@ -4,7 +4,7 @@ description: Use Blazor Bootstrap grid component to display tabular data from th image: https://i.imgur.com/kKNgo2I.png sidebar_label: Grid -sidebar_position: 12 +sidebar_position: 13 --- import CarbonAd from '/carbon-ad.mdx' diff --git a/docs/docs/05-components/modal.mdx b/docs/docs/05-components/modal.mdx index 64fccab5e..829af77b4 100644 --- a/docs/docs/05-components/modal.mdx +++ b/docs/docs/05-components/modal.mdx @@ -4,7 +4,7 @@ description: Use Blazor Bootstrap modal component to add dialogs to your site fo image: https://i.imgur.com/tLiaEs6.jpg sidebar_label: Modal -sidebar_position: 13 +sidebar_position: 14 --- import CarbonAd from '/carbon-ad.mdx' diff --git a/docs/docs/05-components/offcanvas.mdx b/docs/docs/05-components/offcanvas.mdx index f2ec78674..ee6b6de1a 100644 --- a/docs/docs/05-components/offcanvas.mdx +++ b/docs/docs/05-components/offcanvas.mdx @@ -4,7 +4,7 @@ description: Build hidden sidebars into your project for navigation, shopping ca image: https://i.imgur.com/ev2Q8ON.jpg sidebar_label: Offcanvas -sidebar_position: 14 +sidebar_position: 15 --- import CarbonAd from '/carbon-ad.mdx' diff --git a/docs/docs/05-components/pagination.mdx b/docs/docs/05-components/pagination.mdx index 0af7b8895..585bdeb6a 100644 --- a/docs/docs/05-components/pagination.mdx +++ b/docs/docs/05-components/pagination.mdx @@ -4,7 +4,7 @@ description: Use Blazor Bootstrap pagination component to indicate a series of r image: https://i.imgur.com/SCbZVd4.jpg sidebar_label: Pagination -sidebar_position: 15 +sidebar_position: 16 --- import CarbonAd from '/carbon-ad.mdx' diff --git a/docs/docs/05-components/pdf-viewer.mdx b/docs/docs/05-components/pdf-viewer.mdx index 7e59a9869..f51339d04 100644 --- a/docs/docs/05-components/pdf-viewer.mdx +++ b/docs/docs/05-components/pdf-viewer.mdx @@ -4,7 +4,7 @@ description: The Blazor PDF Viewer component allows users to view PDF files dire image: https://i.imgur.com/7Vz9Efi.png sidebar_label: PDF Viewer -sidebar_position: 16 +sidebar_position: 17 --- import CarbonAd from '/carbon-ad.mdx' diff --git a/docs/docs/05-components/placeholders.mdx b/docs/docs/05-components/placeholders.mdx index 9b03c401b..d01e04743 100644 --- a/docs/docs/05-components/placeholders.mdx +++ b/docs/docs/05-components/placeholders.mdx @@ -4,7 +4,7 @@ description: Use Blazor Bootstrap loading placeholders for your components or pa image: https://i.imgur.com/Mw13qfX.png sidebar_label: Placeholders -sidebar_position: 17 +sidebar_position: 18 --- import CarbonAd from '/carbon-ad.mdx' diff --git a/docs/docs/05-components/preload.mdx b/docs/docs/05-components/preload.mdx index 3d0554875..dfe1c963d 100644 --- a/docs/docs/05-components/preload.mdx +++ b/docs/docs/05-components/preload.mdx @@ -4,7 +4,7 @@ description: Indicate the loading state of a page with Blazor Bootstrap preload image: https://i.imgur.com/2cPuqFa.png sidebar_label: Preload -sidebar_position: 18 +sidebar_position: 19 --- import CarbonAd from '/carbon-ad.mdx' diff --git a/docs/docs/05-components/progress.mdx b/docs/docs/05-components/progress.mdx index a50bbe32d..27a337455 100644 --- a/docs/docs/05-components/progress.mdx +++ b/docs/docs/05-components/progress.mdx @@ -4,7 +4,7 @@ description: Documentation and examples for using the Blazor Bootstrap progress image: https://i.imgur.com/MK142lQ.png sidebar_label: Progress -sidebar_position: 19 +sidebar_position: 20 --- import CarbonAd from '/carbon-ad.mdx' diff --git a/docs/docs/05-components/ribbon.mdx b/docs/docs/05-components/ribbon.mdx index 3acee8f52..3d05d7062 100644 --- a/docs/docs/05-components/ribbon.mdx +++ b/docs/docs/05-components/ribbon.mdx @@ -4,7 +4,7 @@ description: Documentation and examples for using the Blazor Bootstrap Ribbon co image: https://i.imgur.com/LpZVLbF.png sidebar_label: Ribbon -sidebar_position: 20 +sidebar_position: 21 --- import CarbonAd from '/carbon-ad.mdx' diff --git a/docs/docs/05-components/script-loader.mdx b/docs/docs/05-components/script-loader.mdx index 712db96bd..e001f9fa1 100644 --- a/docs/docs/05-components/script-loader.mdx +++ b/docs/docs/05-components/script-loader.mdx @@ -4,7 +4,7 @@ description: Documentation and examples for using the Blazor Bootstrap Script Lo image: https://i.imgur.com/sBiYPeQ.png sidebar_label: Script Loader -sidebar_position: 21 +sidebar_position: 22 --- import CarbonAd from '/carbon-ad.mdx' diff --git a/docs/docs/05-components/sidebar.mdx b/docs/docs/05-components/sidebar.mdx index e87487db9..ad66e4c72 100644 --- a/docs/docs/05-components/sidebar.mdx +++ b/docs/docs/05-components/sidebar.mdx @@ -4,7 +4,7 @@ description: Use the Blazor Bootstrap Sidebar component to show consistent cross image: https://i.imgur.com/d91Q9Zt.png sidebar_label: Sidebar -sidebar_position: 22 +sidebar_position: 23 --- import CarbonAd from '/carbon-ad.mdx' diff --git a/docs/docs/05-components/sidebar2.mdx b/docs/docs/05-components/sidebar2.mdx index 35f5278a4..51040dbd7 100644 --- a/docs/docs/05-components/sidebar2.mdx +++ b/docs/docs/05-components/sidebar2.mdx @@ -4,7 +4,7 @@ description: Use the Blazor Bootstrap Sidebar2 component to display consistent, image: https://i.imgur.com/vs8kl7G.png sidebar_label: Sidebar2 -sidebar_position: 23 +sidebar_position: 24 --- import CarbonAd from '/carbon-ad.mdx' diff --git a/docs/docs/05-components/sortable-list.mdx b/docs/docs/05-components/sortable-list.mdx index 766b56c3d..fce01c43e 100644 --- a/docs/docs/05-components/sortable-list.mdx +++ b/docs/docs/05-components/sortable-list.mdx @@ -4,7 +4,7 @@ description: The Blazor Bootstrap Sortable List component, built on top of Sorta image: https://i.imgur.com/bfzP8Yi.png sidebar_label: Sortable List -sidebar_position: 24 +sidebar_position: 25 --- import CarbonAd from '/carbon-ad.mdx' diff --git a/docs/docs/05-components/spinners.mdx b/docs/docs/05-components/spinners.mdx index 88969f5df..bf68434e2 100644 --- a/docs/docs/05-components/spinners.mdx +++ b/docs/docs/05-components/spinners.mdx @@ -4,7 +4,7 @@ description: Visualize the loading state of a component or page using the Blazor image: https://i.imgur.com/G4wyEd6.png sidebar_label: Spinners -sidebar_position: 25 +sidebar_position: 26 --- import CarbonAd from '/carbon-ad.mdx' diff --git a/docs/docs/05-components/tabs.mdx b/docs/docs/05-components/tabs.mdx index cba9371af..4712a6593 100644 --- a/docs/docs/05-components/tabs.mdx +++ b/docs/docs/05-components/tabs.mdx @@ -4,7 +4,7 @@ description: Documentation and examples for using Blazor Bootstrap Tabs componen image: https://i.imgur.com/KelXx6Z.png sidebar_label: Tabs -sidebar_position: 26 +sidebar_position: 27 --- import CarbonAd from '/carbon-ad.mdx' diff --git a/docs/docs/05-components/toasts.mdx b/docs/docs/05-components/toasts.mdx index 2358c2a48..8b55aa27a 100644 --- a/docs/docs/05-components/toasts.mdx +++ b/docs/docs/05-components/toasts.mdx @@ -4,7 +4,7 @@ description: Push notifications to your visitors with a toast, a lightweight and image: https://i.imgur.com/W1YkmJH.png sidebar_label: Toasts -sidebar_position: 27 +sidebar_position: 28 --- import CarbonAd from '/carbon-ad.mdx' diff --git a/docs/docs/05-components/tooltips.mdx b/docs/docs/05-components/tooltips.mdx index 0fd5b5889..26942f083 100644 --- a/docs/docs/05-components/tooltips.mdx +++ b/docs/docs/05-components/tooltips.mdx @@ -4,7 +4,7 @@ description: Use Blazor Bootstrap tooltip component to add custom tooltips to yo image: https://i.imgur.com/uqvqb2i.jpg sidebar_label: Tooltips -sidebar_position: 28 +sidebar_position: 29 --- import CarbonAd from '/carbon-ad.mdx' diff --git a/docs/package.json b/docs/package.json index c59bc1657..762fe6e4c 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,6 +1,6 @@ { "name": "blazorbootstrap", - "version": "3.0.0-preview.3", + "version": "3.0.0", "private": true, "scripts": { "docusaurus": "docusaurus",