Blazor Google Map

Blazor Bootstrap Google Map component will create maps to show locations anywhere in the world using the Google JavaScript API.
API Documentation

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/get-api-key?setupProd=prerequisites.

Examples #

This example demonstrates how to use a simple Google Map component.
@inherits GoogleMapDemoComponentBase

<div class="row g-4">
    <div class="col-md-6">
        <GoogleMap ApiKey="@ApiKey"
                   Center="new GoogleMapCenter(-34.397, 150.644)"
                   Height="400"
                   Width="100"
                   Zoom="8" />
    </div>
    <div class="col-md-6">
        <GoogleMap ApiKey="@ApiKey"
                   Center="new GoogleMapCenter(37.43238031167444, -122.16795397128632)"
                   Height="400"
                   Width="100"
                   Zoom="12" />
    </div>
</div>

Add a marker to a map #

This example demonstrates how to use a simple Google Map component with marker.
@inherits GoogleMapDemoComponentBase

<GoogleMap ApiKey="@ApiKey"
           Center="new GoogleMapCenter(37.43238031167444, -122.16795397128632)"
           Height="400"
           Width="100"
           Zoom="10"
           Markers="markers" />

@code {
    List<GoogleMapMarker> 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",
        }
    };
}

Marker customization #

Scale the marker #

To scale a marker, use the PinElement.Scale option.
@inherits GoogleMapDemoComponentBase

<GoogleMap ApiKey="@ApiKey"
           Center="new GoogleMapCenter(37.43238031167444, -122.16795397128632)"
           Height="400"
           Width="100"
           Zoom="10"
           Markers="markers" />

@code {
    List<GoogleMapMarker> 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",
        }
    };
}

Change the background color #

Use the PinElement.Background option to change the background color of a marker.
@inherits GoogleMapDemoComponentBase

<GoogleMap ApiKey="@ApiKey"
           Center="new GoogleMapCenter(37.43238031167444, -122.16795397128632)"
           Height="400"
           Width="100"
           Zoom="10"
           Markers="markers" />

@code {
    List<GoogleMapMarker> 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",
        }
    };
}

Change the border color #

Use the PinElement.BorderColor option to change the border color of a marker.
@inherits GoogleMapDemoComponentBase

<GoogleMap ApiKey="@ApiKey"
           Center="new GoogleMapCenter(37.43238031167444, -122.16795397128632)"
           Height="400"
           Width="100"
           Zoom="10"
           Markers="markers" />

@code {
    List<GoogleMapMarker> 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",
        }
    };
}

Change the glyph color #

Use the PinElement.GlyphColor option to change the glyph color of a marker.
@inherits GoogleMapDemoComponentBase

<GoogleMap ApiKey="@ApiKey"
           Center="new GoogleMapCenter(37.43238031167444, -122.16795397128632)"
           Height="400"
           Width="100"
           Zoom="10"
           Markers="markers" />

@code {
    List<GoogleMapMarker> 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",
        }
    };
}

Hide the glyph #

Set the PinElement.GlyphText option to an empty string to hide a marker's glyph.
@inherits GoogleMapDemoComponentBase

<GoogleMap ApiKey="@ApiKey"
           Center="new GoogleMapCenter(37.43238031167444, -122.16795397128632)"
           Height="400"
           Width="100"
           Zoom="10"
           Markers="markers" />

@code {
    List<GoogleMapMarker> markers = new()
    {
        new GoogleMapMarker()
        {
            PinElement = new PinElement{ GlyphText = "",  },
            Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352) ,
            Title = "Single family house with modern design",
        },
        new GoogleMapMarker()
        {
            PinElement = new PinElement{ GlyphText = "",  },
            Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727) ,
            Title = "Townhouse with friendly neighbors",
        }
    };
}

Use text glyphs #

Use the PinElement.GlyphText option to show text in a marker pin.
@inherits GoogleMapDemoComponentBase

<GoogleMap ApiKey="@ApiKey"
           Center="new GoogleMapCenter(37.43238031167444, -122.16795397128632)"
           Height="400"
           Width="100"
           Zoom="10"
           Markers="markers" />

@code {
    List<GoogleMapMarker> markers = new()
    {
        new GoogleMapMarker()
        {
            PinElement = new PinElement { Background = "#137333", GlyphColor = "white", GlyphText = "A" },
            Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352),
            Title = "Marker A",
        },
        new GoogleMapMarker()
        {
            PinElement = new PinElement { Background = "#1A73E8", GlyphColor = "white", GlyphText = "B" },
            Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727),
            Title = "Marker B",
        }
    };
}

Use image glyphs #

Use the PinElement.GlyphSrc option to show an image in a marker pin.
@inherits GoogleMapDemoComponentBase

<GoogleMap ApiKey="@ApiKey"
           Center="new GoogleMapCenter(37.43238031167444, -122.16795397128632)"
           Height="400"
           Width="100"
           Zoom="10"
           Markers="markers" />

@code {
    private const string MarkerImageUrl = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";

    List<GoogleMapMarker> markers = new()
    {
        new GoogleMapMarker()
        {
            PinElement = new PinElement { GlyphSrc = MarkerImageUrl },
            Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352),
            Title = "Image marker one",
        },
        new GoogleMapMarker()
        {
            PinElement = new PinElement { GlyphSrc = MarkerImageUrl },
            Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727),
            Title = "Image marker two",
        }
    };
}

Use icon fonts #

Existing PinElement.UseIconFonts and legacy PinElement.Glyph configurations remain supported while existing applications migrate.
@inherits GoogleMapDemoComponentBase

<GoogleMap ApiKey="@ApiKey"
           Center="new GoogleMapCenter(37.43238031167444, -122.16795397128632)"
           Height="400"
           Width="100"
           Zoom="10"
           Markers="markers" />

@code {
#pragma warning disable CS0618 // This demo intentionally exercises the legacy icon-font compatibility path.
    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",
        },
        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",
        }
    };
#pragma warning restore CS0618
}

Markers with HTML and CSS #

@inherits GoogleMapDemoComponentBase

<GoogleMap ApiKey="@ApiKey"
           Center="new GoogleMapCenter(37.43238031167444, -122.16795397128632)"
           Height="400"
           Width="100"
           Zoom="10"
           Markers="markers" />

@code {
    List<GoogleMapMarker> markers = new()
    {
        new GoogleMapMarker()
        {
            Content = "<i class='bi bi-cloud-drizzle-fill fs-4 text-primary'></i>",
            Position = new GoogleMapMarkerPosition(37.50024109655184, -122.28528451834352),
            Title = "Drizzle"
        },
        new GoogleMapMarker()
        {
            Content = "<i class='bi bi-cloud-lightning-rain-fill fs-4 text-danger'></i>",
            Position = new GoogleMapMarkerPosition(37.44440882321596, -122.2160620727),
            Title = "Lightning rain"
        },
        new GoogleMapMarker()
        {
            Content = "<i class='bi bi-cloud-rain-fill fs-4 text-dark'></i>",
            Position = new GoogleMapMarkerPosition(37.39561833718522, -122.21855116258479),
            Title = "Rain"
        }
    };
}

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. 
@inherits GoogleMapDemoComponentBase

<GoogleMap ApiKey="@ApiKey"
           Center="new GoogleMapCenter(37.43238031167444, -122.16795397128632)"
           Height="400"
           Width="100"
           Zoom="10"
           Markers="markers"
           Clickable="true"
           OnMarkerClick="OnGoogleMapMarkerClick" />

@code {
#pragma warning disable CS0618 // This demo intentionally exercises the legacy icon-font compatibility path.
    [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<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",
        },
        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",
        }
    };
#pragma warning restore CS0618
}

Dynamic markers #

@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"
           OnMarkerClick="OnGoogleMapMarkerClick" />

@code {
#pragma warning disable CS0618 // This demo intentionally exercises the legacy icon-font compatibility path.
    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<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",
            };
    }
#pragma warning restore CS0618
}
If you like Blazor Bootstrap, give it a star on GitHub!
Blazor Bootstrap Blazor Bootstrap
  • Designed and built with all the love in the world by the Blazor Bootstrap team with the help of our contributors.
  • Code licensed Apache License 2.0.
  • Currently v4.0.0.
  • Powered by .NET 10.0.0
Links
Guides
Community
Other Libraries

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please reload the page.