GoogleMap

GoogleMap 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.

How it works #

The GoogleMap component displays an interactive map using the Google Maps JavaScript API, allowing you to show locations, add markers, and customize the map’s appearance.

How to use:
  1. Add the GoogleMap component to your page.
  2. Set the ApiKey property with your Google Maps API key.
  3. Configure the Center property to set the initial map location (latitude and longitude).
  4. Adjust Height, Width, and Zoom as needed for your layout and desired zoom level.
This demo shows the basic setup for rendering a map. You can further enhance it by adding markers and customizing map options. 
@inherits GoogleMapDemoComponentBase

<GoogleMap ApiKey="@ApiKey"
           Center="new GoogleMapCenter(-34.397, 150.644)"
           Height="400"
           Width="100"
           Zoom="8" />

Add a marker to a map #

The GoogleMap component supports adding markers to highlight specific locations.

How to use:
  1. Create a List<GoogleMapMarker> with one or more markers, each specifying a Position (latitude and longitude) and an optional Title.
  2. Assign this list to the Markers property of the GoogleMap component.
This demo illustrates how to display multiple markers on the map, each representing a different location. 
@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 #

You can customize the appearance of map markers using the PinElement property of GoogleMapMarker. This allows you to change the marker’s scale, background color, border color, glyph (icon), and more.

How to use:
  1. For each GoogleMapMarker, set the PinElement property with your desired customization options.
  2. Customize properties such as Scale, Background, BorderColor, Glyph, GlyphColor, and UseIconFonts as needed.
The following sections demonstrate specific marker customizations.

Scale the marker #

You can adjust the size of a marker by setting the Scale property in the PinElement.

How to use:
  1. Set PinElement.Scale to your desired value (e.g., 1.5 for 150% size).
This demo shows how to make markers larger for better visibility. 
@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 #

The marker’s background color can be customized using the Background property in PinElement.

How to use:
  1. Set PinElement.Background to a valid CSS color value (e.g., "#FBBC04").
This demo demonstrates how to apply a custom background color to your markers. 
@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 #

The marker’s border color can be set using the BorderColor property in PinElement.

How to use:
  1. Set PinElement.BorderColor to a valid CSS color value (e.g., "#137333").
This demo shows how to highlight markers with a custom border color. 
@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 #

The glyph (icon) color of a marker can be changed using the GlyphColor property in PinElement.

How to use:
  1. Set PinElement.GlyphColor to your preferred color (e.g., "white").
This demo illustrates how to customize the icon color for better contrast or branding. 
@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 #

To hide the marker’s glyph (icon), set the Glyph property in PinElement to an empty string.

How to use:
  1. Set PinElement.Glyph to "" (empty string) to remove the icon from the marker.
This demo shows how to display markers without any icon. 
@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{ 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",
        }
    };
}

Use icon fonts #

You can use icon fonts (such as Bootstrap Icons) for marker glyphs by setting UseIconFonts to true and providing a valid icon class in Glyph.

How to use:
  1. Set PinElement.UseIconFonts to true.
  2. Set PinElement.Glyph to the desired icon class (e.g., "bi bi-cloud-drizzle-fill fs-6 text-white").
This demo demonstrates how to use icon fonts for visually rich markers. 
@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
            {
                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",
        }
    };
}

Markers with HTML and CSS #

Markers can display custom HTML and CSS content by setting the Content property of GoogleMapMarker.

How to use:
  1. Set the Content property to your desired HTML markup (e.g., an <i> tag with icon classes).
  2. Style the content using CSS classes as needed.
This demo shows how to create markers with fully custom HTML and CSS for maximum flexibility. 
@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 #

Markers can be made interactive by enabling the Clickable property and handling the OnMarkerClick event.

How to use:
  1. Set the Clickable property of GoogleMap to true.
  2. Handle the OnMarkerClick event to respond when a user clicks a marker.
This demo demonstrates how to make markers respond to user clicks, enabling interactive map experiences. 
@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 {
    private void OnGoogleMapMarkerClick(GoogleMapMarker marker)
    {
        // do something
    }

    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",
        }
    };
}

Dynamic markers #

The GoogleMap component supports dynamic marker management, allowing you to add, update, and refresh markers on the map at runtime. This is useful for scenarios where marker data changes frequently, such as live weather updates or real-time tracking.

How to use:
  1. Maintain a List<GoogleMapMarker> in your component to represent the current markers.
  2. Use AddMarkerAsync to add a single marker dynamically to the map.
  3. Use UpdateMarkersAsync to replace all markers with a new set (e.g., for batch updates).
  4. Call RefreshAsync to re-render the map and update marker display if you modify the marker list directly.
  5. Optionally, handle the OnMarkerClick event to respond to user interactions with markers.
This demo shows how to add individual markers, update the entire marker set, and refresh the map interactively using buttons. It demonstrates real-time marker management for dynamic data scenarios. 
@inherits GoogleMapDemoComponentBase

<Buttons>
    <Button Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="(async () => await AddWeatherMarkerAsync())">
        <BootstrapIcon IconContainerCssClass="mr-1" Name="BootstrapIconName.GeoAltFill" /> Add Marker
    </Button>
    <Button Color="ButtonColor.Danger" Size="ButtonSize.Small" @onclick="(async () => await RandomWeatherMarkersAsync())">
        <BootstrapIcon IconContainerCssClass="mr-1" Name="BootstrapIconName.GeoAltFill" /> Random Markers
    </Button>
    <Button Color="ButtonColor.Warning" Size="ButtonSize.Small" @onclick="(async () => await RefreshMapAsync())">
        <BootstrapIcon IconContainerCssClass="mr-1" Name="BootstrapIconName.MapFill" /> Refresh Map
    </Button>
</Buttons>

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

@code {
    Random random = new Random(2000000000);
    GoogleMap googleMapRef = default!;

    private async ValueTask AddWeatherMarkerAsync() => await googleMapRef.AddMarkerAsync(GetRandomMarker());

    private async Task RandomWeatherMarkersAsync()
    {
        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)
    {
        // do something
    }

    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",
            };
    }
}
DO YOU KNOW?
This demo website is built using the BlazorExpress.Bulma library and published on the Azure Web App. See our source code on GitHub.
If you like BlazorExpress.Bulma, give it a star on GitHub!