Blazor Google Map

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

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 Map 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<GoogleMapMarker>?`	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 Map component.	3.0.0
UpdateMarkersAsync(`IEnumerable<GoogleMapMarker>` 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 Map component.

@inherits GoogleMapDemoComponentBase

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

See demo here

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

See demo here

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

See demo here

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

See demo here

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

See demo here

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

See demo here

Hide the glyph

Set the PinElement.Glyph 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{ 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

Use icon fonts

Use the PinElement.UseIconFonts and PinElement.Glyph options to use the icon fonts.

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

See demo here

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

See demo here

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

See demo here

Dynamic markers

Add marker

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

See demo here

Blazor Google Map

Prerequisite​

Parameters​

Methods​

Callback Events​

Examples​

Add a marker to a map​

Marker customization​

Scale the marker​

Change the background color​

Change the border color​

Change the glyph color​

Hide the glyph​

Use icon fonts​

Markers with HTML and CSS​

Make a marker clickable​

Dynamic markers​

Prerequisite

Parameters

Methods

Callback Events

Examples

Add a marker to a map

Marker customization

Scale the marker

Change the background color

Change the border color

Change the glyph color

Hide the glyph

Use icon fonts

Markers with HTML and CSS

Make a marker clickable

Dynamic markers