BlazorGoogleMaps 4.11.3
See the version list below for details.
dotnet add package BlazorGoogleMaps --version 4.11.3
NuGet\Install-Package BlazorGoogleMaps -Version 4.11.3
<PackageReference Include="BlazorGoogleMaps" Version="4.11.3" />
<PackageVersion Include="BlazorGoogleMaps" Version="4.11.3" />
<PackageReference Include="BlazorGoogleMaps" />
paket add BlazorGoogleMaps --version 4.11.3
#r "nuget: BlazorGoogleMaps, 4.11.3"
#:package BlazorGoogleMaps@4.11.3
#addin nuget:?package=BlazorGoogleMaps&version=4.11.3
#tool nuget:?package=BlazorGoogleMaps&version=4.11.3
BlazorGoogleMaps
Blazor interop for GoogleMap library
Usage
- Provide your Google API key to BlazorGoogleMaps with one of the following methods. (You can get a key here: https://developers.google.com/maps/documentation/javascript/get-api-key)
Use the bootstrap loader with a key service (recommended):
services.AddBlazorGoogleMaps("YOUR_KEY_GOES_HERE");
OR specify google api libraries and/or version:
services.AddBlazorGoogleMaps(new GoogleMapsComponents.Maps.MapApiLoadOptions("YOUR_KEY_GOES_HERE")
{
Version = "beta",
Libraries = "places,visualization,drawing,marker",
});
OR to do something more complex (e.g. looking up keys asynchronously), implement a Scoped key service and add it with something like:
services.AddScoped<IBlazorGoogleMapsKeyService, YourServiceImplementation>();
OR (legacy - not recommended) Add google map script HEAD tag to wwwroot/index.html in Client side or _Host.cshtml in Server Side.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_GOES_HERE&v=3"></script>
- Add path to project javascript functions file in wwwroot/index.html for Blazor WASM, or in _Host.cshtml or _HostLayout.cshtml for Blazor Server.
<script src="_content/BlazorGoogleMaps/js/objectManager.js"></script>
If you want to use marker clustering add this script as well:
<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
- Using the component is the same for both Blazor WASM and Blazor Server
@page "/map"
@using GoogleMapsComponents
@using GoogleMapsComponents.Maps
<h1>Google Map</h1>
<div style="height:@Height">
<GoogleMap @ref="@_map1" Id="map1" Options="@mapOptions" Height="100%" OnAfterInit="AfterMapRender"></GoogleMap>
</div>
@functions {
private GoogleMap _map1;
private MapOptions mapOptions;
protected override void OnInitialized()
{
mapOptions = new MapOptions()
{
Zoom = 13,
Center = new LatLngLiteral()
{
Lat = 13.505892,
Lng = 100.8162
},
MapTypeId = MapTypeId.Roadmap
};
}
private async Task AfterMapRender()
{
_bounds = await LatLngBounds.CreateAsync(_map1.JsRuntime);
}
}
OR Render markers with Blazor (currently only with v=beta
version of google-maps, and specify a MapId
)
@page "/map"
@using GoogleMapsComponents
@using GoogleMapsComponents.Maps
<h1>Google Map</h1>
<AdvancedGoogleMap @ref="@_map1" Id="map1" Options="@mapOptions">
@foreach (var markerRef in Markers)
{
<MarkerComponent
@key="markerRef.Id"
Lat="@markerRef.Lat"
Lng="@markerRef.Lng"
Clickable="@markerRef.Clickable"
Draggable="@markerRef.Draggable"
OnClick="@(() => markerRef.Active = !markerRef.Active)"
OnMove="pos => markerRef.UpdatePosition(pos)">
<p>I am a blazor component</p>
</MarkerComponent>
}
</AdvancedGoogleMap>
@code {
private List<MarkerData> Markers =
[
new MarkerData { Id = 1, Lat = 13.505892, Lng = 100.8162 },
];
private AdvancedGoogleMap? _map1;
private MapOptions mapOptions =new MapOptions()
{
Zoom = 13,
Center = new LatLngLiteral()
{
Lat = 13.505892,
Lng = 100.8162
},
MapId = "DEMO_MAP_ID", //required for blazor markers
MapTypeId = MapTypeId.Roadmap
};
public class MarkerData
{
public int Id { get; set; }
public double Lat { get; set; }
public double Lng { get; set; }
public bool Clickable { get; set; } = true;
public bool Draggable { get; set; }
public bool Active { get; set; }
public void UpdatePosition(LatLngLiteral position)
{
Lat = position.Lat;
Lng = position.Lng;
}
}
}
Samples
Please check server side samples https://github.com/rungwiroon/BlazorGoogleMaps/tree/master/ServerSideDemo which are most to date
ClientSide demos online https://rungwiroon.github.io/BlazorGoogleMaps/mapEvents
Breaking change from 4.0.0 Migrate to .NET 8 #286.
Breaking change from 3.0.0 Migrate from Newtonsoft.Json to System.Text.Json.
Breaking change from 2.0.0 LatLngLiteral constructor's parameters order changed #173
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. net9.0 is compatible. net9.0-android was computed. net9.0-browser was computed. net9.0-ios was computed. net9.0-maccatalyst was computed. net9.0-macos was computed. net9.0-tvos was computed. net9.0-windows was computed. net10.0 was computed. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed. |
-
net8.0
- Microsoft.AspNetCore.Components (>= 8.0.16)
- Microsoft.AspNetCore.Components.Web (>= 8.0.16)
- Microsoft.JSInterop (>= 8.0.16)
- OneOf (>= 3.0.271)
- System.Text.Json (>= 8.0.5)
-
net9.0
- Microsoft.AspNetCore.Components (>= 9.0.5)
- Microsoft.AspNetCore.Components.Web (>= 9.0.5)
- Microsoft.JSInterop (>= 9.0.5)
- OneOf (>= 3.0.271)
- System.Text.Json (>= 9.0.5)
NuGet packages (4)
Showing the top 4 NuGet packages that depend on BlazorGoogleMaps:
Package | Downloads |
---|---|
templar-common-libary
Package Description |
|
Magiq.Blazor
Provides views and services to be used in Blazor Client and Server projects. |
|
AeroBlazor
A blazor library, extending MudBlazor |
|
Microfrontend.one
Package Description |
GitHub repositories
This package is not used by any popular GitHub repositories.
Version | Downloads | Last Updated |
---|---|---|
4.13.6 | 5,461 | 8/5/2025 |
4.13.5 | 712 | 7/30/2025 |
4.13.4 | 1,083 | 7/27/2025 |
4.13.3 | 232 | 7/26/2025 |
4.13.2 | 937 | 7/15/2025 |
4.13.1 | 1,488 | 7/5/2025 |
4.13.0 | 3,979 | 6/5/2025 |
4.12.2 | 1,513 | 6/2/2025 |
4.12.1 | 384 | 6/1/2025 |
4.12.0 | 487 | 5/28/2025 |
4.11.3 | 191 | 5/28/2025 |
4.11.2 | 1,760 | 5/13/2025 |
4.11.1 | 10,016 | 4/20/2025 |
4.11.0 | 601 | 4/14/2025 |
4.10.1 | 1,880 | 4/1/2025 |
4.10.0 | 643 | 3/30/2025 |
4.9.5 | 315 | 3/28/2025 |
4.9.4 | 208 | 3/27/2025 |
4.9.3 | 6,155 | 2/23/2025 |
4.9.2 | 14,105 | 12/14/2024 |
4.9.1 | 5,157 | 11/21/2024 |
4.9.0 | 2,057 | 11/17/2024 |
4.8.0 | 310 | 11/16/2024 |
4.7.15 | 153 | 11/16/2024 |
4.7.14 | 12,110 | 10/9/2024 |
4.7.13 | 9,250 | 10/3/2024 |
4.7.12 | 1,635 | 9/29/2024 |
4.7.11 | 10,845 | 8/29/2024 |
4.7.10 | 1,183 | 8/28/2024 |
4.7.9 | 152 | 8/28/2024 |
4.7.8 | 202 | 8/28/2024 |
4.7.7 | 1,806 | 8/25/2024 |
4.7.6 | 5,278 | 8/12/2024 |
4.7.5 | 219 | 8/11/2024 |
4.7.4 | 166 | 8/10/2024 |
4.7.3 | 2,491 | 7/29/2024 |
4.7.2 | 3,208 | 7/25/2024 |
4.7.1 | 7,518 | 7/8/2024 |
4.7.0 | 342 | 7/4/2024 |
4.6.2 | 387 | 7/2/2024 |
4.6.1 | 216 | 7/1/2024 |
4.6.0 | 1,182 | 6/26/2024 |
4.5.0 | 950 | 6/22/2024 |
4.4.2 | 4,970 | 6/12/2024 |
4.4.1 | 269 | 6/11/2024 |
4.4.0 | 267 | 6/10/2024 |
4.3.0 | 7,435 | 5/15/2024 |
4.2.0 | 6,389 | 4/25/2024 |
4.1.2 | 8,684 | 3/21/2024 |
4.1.1 | 509 | 3/20/2024 |
4.1.0 | 42,110 | 2/2/2024 |
4.0.3 | 959 | 1/18/2024 |
4.0.2 | 4,521 | 12/20/2023 |
4.0.1 | 1,908 | 12/17/2023 |
4.0.0 | 301 | 12/15/2023 |
3.3.2 | 28,234 | 12/15/2023 |
3.3.1 | 10,199 | 12/5/2023 |
3.2.5 | 2,687 | 11/23/2023 |
3.2.4 | 216 | 11/23/2023 |
3.2.3 | 8,771 | 10/30/2023 |
3.2.2 | 1,845 | 10/25/2023 |
3.2.1 | 289 | 10/25/2023 |
3.2.0 | 4,800 | 9/18/2023 |
3.1.4 | 3,925 | 9/9/2023 |
3.1.3 | 622 | 9/3/2023 |
3.1.2 | 7,866 | 8/1/2023 |
3.1.1 | 5,251 | 7/19/2023 |
3.1.0 | 2,127 | 7/10/2023 |
3.0.8 | 332 | 7/9/2023 |
3.0.7 | 11,606 | 6/9/2023 |
3.0.6 | 7,143 | 5/7/2023 |
3.0.5 | 3,891 | 4/13/2023 |
3.0.4 | 542 | 4/11/2023 |
3.0.3 | 1,453 | 4/6/2023 |
3.0.2 | 686 | 4/3/2023 |
3.0.1 | 417 | 4/1/2023 |
3.0.0 | 1,927 | 3/28/2023 |
2.5.7 | 12,937 | 3/14/2023 |
2.5.6 | 1,035 | 3/13/2023 |
2.5.5 | 4,014 | 2/24/2023 |
2.5.4 | 10,397 | 2/11/2023 |
2.5.3 | 1,028 | 2/6/2023 |
2.5.2 | 3,173 | 1/20/2023 |
2.5.1 | 1,291 | 1/17/2023 |
2.4.4 | 12,722 | 12/13/2022 |
2.4.3 | 7,105 | 11/29/2022 |
2.4.2 | 447 | 11/29/2022 |
2.4.1 | 1,598 | 11/25/2022 |
2.3.1 | 2,933 | 11/14/2022 |
2.2.6 | 27,077 | 9/5/2022 |
2.2.5 | 1,687 | 8/27/2022 |
2.2.4 | 519 | 8/27/2022 |
2.2.3 | 1,517 | 8/22/2022 |
2.2.2 | 653 | 8/19/2022 |
2.2.1 | 33,134 | 6/28/2022 |
2.2.0 | 3,072 | 6/20/2022 |
2.1.1 | 2,539 | 5/23/2022 |
2.1.0 | 2,319 | 5/3/2022 |
2.0.6 | 811 | 4/30/2022 |
2.0.5 | 1,822 | 4/21/2022 |
2.0.4 | 1,581 | 4/15/2022 |
2.0.3 | 1,237 | 4/1/2022 |
2.0.2 | 666 | 3/30/2022 |
2.0.1 | 592 | 3/30/2022 |
2.0.0 | 1,318 | 3/29/2022 |
1.5.5 | 11,772 | 2/24/2022 |
1.5.4 | 769 | 2/21/2022 |
1.5.3 | 2,087 | 2/16/2022 |
1.5.2 | 803 | 2/15/2022 |
1.5.1 | 4,252 | 2/7/2022 |
1.4.2 | 7,213 | 12/15/2021 |
1.4.1 | 7,841 | 12/8/2021 |
1.4.0 | 479 | 12/7/2021 |
1.3.0 | 635 | 12/2/2021 |
1.2.1 | 17,774 | 10/11/2021 |
1.1.8 | 1,450 | 9/27/2021 |
1.1.7 | 634 | 9/25/2021 |
1.1.6 | 507 | 9/23/2021 |
1.1.5 | 1,493 | 9/16/2021 |
1.1.4 | 1,382 | 9/12/2021 |
1.1.3 | 662 | 9/9/2021 |
1.1.2 | 862 | 9/7/2021 |
1.1.1 | 1,414 | 8/30/2021 |
1.0.17 | 2,371 | 7/27/2021 |
1.0.16 | 945 | 7/17/2021 |
1.0.15 | 9,102 | 4/29/2021 |
1.0.14 | 5,983 | 4/9/2021 |
1.0.13 | 33,657 | 3/18/2021 |
1.0.12 | 4,511 | 2/13/2021 |
1.0.11 | 682 | 2/10/2021 |
1.0.10 | 541 | 2/10/2021 |
1.0.9 | 521 | 2/10/2021 |
1.0.8 | 889 | 2/3/2021 |
1.0.7 | 4,255 | 1/30/2021 |
1.0.6 | 594 | 1/28/2021 |
1.0.5 | 1,075 | 1/18/2021 |
1.0.4 | 760 | 1/14/2021 |
1.0.3 | 556 | 1/13/2021 |
1.0.2 | 1,519 | 1/1/2021 |
1.0.1 | 967 | 12/25/2020 |
1.0.0 | 574 | 12/25/2020 |
0.9.3 | 571 | 12/25/2020 |
0.9.2 | 818 | 12/22/2020 |
0.9.1 | 1,282 | 12/4/2020 |
0.9.0 | 7,023 | 10/23/2020 |
0.8.1 | 1,199 | 10/4/2020 |
0.8.0 | 1,889 | 9/16/2020 |
0.7.1 | 1,766 | 8/9/2020 |
0.6.14 | 650 | 8/4/2020 |
0.6.13 | 806 | 8/2/2020 |
0.6.12 | 836 | 7/28/2020 |
0.6.11 | 629 | 7/27/2020 |
0.6.10 | 3,505 | 7/20/2020 |
0.6.9 | 734 | 7/14/2020 |
0.6.8 | 765 | 7/9/2020 |
0.6.7 | 711 | 7/7/2020 |
0.6.6 | 778 | 6/30/2020 |
0.6.5 | 1,172 | 6/4/2020 |
0.6.4 | 1,704 | 5/16/2020 |
0.6.3 | 1,142 | 5/5/2020 |
0.6.2 | 1,728 | 4/16/2020 |
0.6.1 | 834 | 3/27/2020 |
0.6.0 | 644 | 3/27/2020 |
0.5.9 | 662 | 3/26/2020 |
0.5.8 | 1,057 | 3/25/2020 |
0.5.7 | 647 | 3/25/2020 |
0.5.6 | 748 | 3/17/2020 |
0.5.5 | 1,673 | 3/7/2020 |
0.5.4 | 1,029 | 2/9/2020 |
0.5.3 | 746 | 2/8/2020 |
0.5.2 | 1,953 | 1/24/2020 |
0.5.1-alpha | 944 | 12/9/2019 |
0.4.8-alpha | 555 | 12/1/2019 |
0.4.7-alpha | 644 | 10/18/2019 |
0.4.6-alpha | 591 | 9/26/2019 |
0.4.5-alpha | 448 | 8/20/2019 |
0.4.0-alpha | 463 | 6/15/2019 |
0.3.0 | 995 | 6/1/2019 |
0.1.0 | 1,134 | 2/2/2019 |