BlazorGoogleMaps 4.10.1
dotnet add package BlazorGoogleMaps --version 4.10.1
NuGet\Install-Package BlazorGoogleMaps -Version 4.10.1
<PackageReference Include="BlazorGoogleMaps" Version="4.10.1" />
<PackageVersion Include="BlazorGoogleMaps" Version="4.10.1" />
<PackageReference Include="BlazorGoogleMaps" />
paket add BlazorGoogleMaps --version 4.10.1
#r "nuget: BlazorGoogleMaps, 4.10.1"
#addin nuget:?package=BlazorGoogleMaps&version=4.10.1
#tool nuget:?package=BlazorGoogleMaps&version=4.10.1
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. |
-
net8.0
- Microsoft.AspNetCore.Components (>= 8.0.14)
- Microsoft.AspNetCore.Components.Web (>= 8.0.14)
- Microsoft.JSInterop (>= 8.0.14)
- OneOf (>= 3.0.271)
- System.Text.Json (>= 8.0.5)
-
net9.0
- Microsoft.AspNetCore.Components (>= 9.0.3)
- Microsoft.AspNetCore.Components.Web (>= 9.0.3)
- Microsoft.JSInterop (>= 9.0.3)
- OneOf (>= 3.0.271)
- System.Text.Json (>= 9.0.3)
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.10.1 | 687 | 4/1/2025 |
4.10.0 | 282 | 3/30/2025 |
4.9.5 | 154 | 3/28/2025 |
4.9.4 | 152 | 3/27/2025 |
4.9.3 | 3,581 | 2/23/2025 |
4.9.2 | 10,734 | 12/14/2024 |
4.9.1 | 4,393 | 11/21/2024 |
4.9.0 | 2,015 | 11/17/2024 |
4.8.0 | 282 | 11/16/2024 |
4.7.15 | 117 | 11/16/2024 |
4.7.14 | 9,811 | 10/9/2024 |
4.7.13 | 5,413 | 10/3/2024 |
4.7.12 | 1,519 | 9/29/2024 |
4.7.11 | 9,666 | 8/29/2024 |
4.7.10 | 751 | 8/28/2024 |
4.7.9 | 133 | 8/28/2024 |
4.7.8 | 183 | 8/28/2024 |
4.7.7 | 1,503 | 8/25/2024 |
4.7.6 | 4,823 | 8/12/2024 |
4.7.5 | 198 | 8/11/2024 |
4.7.4 | 144 | 8/10/2024 |
4.7.3 | 2,173 | 7/29/2024 |
4.7.2 | 2,422 | 7/25/2024 |
4.7.1 | 6,194 | 7/8/2024 |
4.7.0 | 315 | 7/4/2024 |
4.6.2 | 359 | 7/2/2024 |
4.6.1 | 197 | 7/1/2024 |
4.6.0 | 1,044 | 6/26/2024 |
4.5.0 | 928 | 6/22/2024 |
4.4.2 | 4,647 | 6/12/2024 |
4.4.1 | 247 | 6/11/2024 |
4.4.0 | 223 | 6/10/2024 |
4.3.0 | 6,830 | 5/15/2024 |
4.2.0 | 6,072 | 4/25/2024 |
4.1.2 | 8,518 | 3/21/2024 |
4.1.1 | 486 | 3/20/2024 |
4.1.0 | 33,085 | 2/2/2024 |
4.0.3 | 921 | 1/18/2024 |
4.0.2 | 4,473 | 12/20/2023 |
4.0.1 | 1,884 | 12/17/2023 |
4.0.0 | 267 | 12/15/2023 |
3.3.2 | 20,413 | 12/15/2023 |
3.3.1 | 9,726 | 12/5/2023 |
3.2.5 | 2,644 | 11/23/2023 |
3.2.4 | 191 | 11/23/2023 |
3.2.3 | 8,164 | 10/30/2023 |
3.2.2 | 1,824 | 10/25/2023 |
3.2.1 | 261 | 10/25/2023 |
3.2.0 | 4,718 | 9/18/2023 |
3.1.4 | 3,834 | 9/9/2023 |
3.1.3 | 586 | 9/3/2023 |
3.1.2 | 7,784 | 8/1/2023 |
3.1.1 | 5,191 | 7/19/2023 |
3.1.0 | 2,069 | 7/10/2023 |
3.0.8 | 286 | 7/9/2023 |
3.0.7 | 11,042 | 6/9/2023 |
3.0.6 | 6,668 | 5/7/2023 |
3.0.5 | 3,746 | 4/13/2023 |
3.0.4 | 487 | 4/11/2023 |
3.0.3 | 1,404 | 4/6/2023 |
3.0.2 | 625 | 4/3/2023 |
3.0.1 | 367 | 4/1/2023 |
3.0.0 | 1,879 | 3/28/2023 |
2.5.7 | 12,740 | 3/14/2023 |
2.5.6 | 979 | 3/13/2023 |
2.5.5 | 3,897 | 2/24/2023 |
2.5.4 | 10,294 | 2/11/2023 |
2.5.3 | 973 | 2/6/2023 |
2.5.2 | 3,056 | 1/20/2023 |
2.5.1 | 1,235 | 1/17/2023 |
2.4.4 | 11,814 | 12/13/2022 |
2.4.3 | 6,868 | 11/29/2022 |
2.4.2 | 397 | 11/29/2022 |
2.4.1 | 1,547 | 11/25/2022 |
2.3.1 | 2,877 | 11/14/2022 |
2.2.6 | 26,886 | 9/5/2022 |
2.2.5 | 1,627 | 8/27/2022 |
2.2.4 | 462 | 8/27/2022 |
2.2.3 | 1,455 | 8/22/2022 |
2.2.2 | 595 | 8/19/2022 |
2.2.1 | 30,112 | 6/28/2022 |
2.2.0 | 3,011 | 6/20/2022 |
2.1.1 | 2,470 | 5/23/2022 |
2.1.0 | 2,253 | 5/3/2022 |
2.0.6 | 750 | 4/30/2022 |
2.0.5 | 1,759 | 4/21/2022 |
2.0.4 | 1,508 | 4/15/2022 |
2.0.3 | 1,160 | 4/1/2022 |
2.0.2 | 595 | 3/30/2022 |
2.0.1 | 532 | 3/30/2022 |
2.0.0 | 1,251 | 3/29/2022 |
1.5.5 | 11,614 | 2/24/2022 |
1.5.4 | 704 | 2/21/2022 |
1.5.3 | 1,988 | 2/16/2022 |
1.5.2 | 729 | 2/15/2022 |
1.5.1 | 4,185 | 2/7/2022 |
1.4.2 | 7,104 | 12/15/2021 |
1.4.1 | 6,856 | 12/8/2021 |
1.4.0 | 405 | 12/7/2021 |
1.3.0 | 562 | 12/2/2021 |
1.2.1 | 17,233 | 10/11/2021 |
1.1.8 | 1,384 | 9/27/2021 |
1.1.7 | 563 | 9/25/2021 |
1.1.6 | 437 | 9/23/2021 |
1.1.5 | 1,411 | 9/16/2021 |
1.1.4 | 1,317 | 9/12/2021 |
1.1.3 | 595 | 9/9/2021 |
1.1.2 | 800 | 9/7/2021 |
1.1.1 | 1,341 | 8/30/2021 |
1.0.17 | 2,260 | 7/27/2021 |
1.0.16 | 876 | 7/17/2021 |
1.0.15 | 9,014 | 4/29/2021 |
1.0.14 | 5,828 | 4/9/2021 |
1.0.13 | 31,285 | 3/18/2021 |
1.0.12 | 4,438 | 2/13/2021 |
1.0.11 | 613 | 2/10/2021 |
1.0.10 | 469 | 2/10/2021 |
1.0.9 | 447 | 2/10/2021 |
1.0.8 | 815 | 2/3/2021 |
1.0.7 | 4,060 | 1/30/2021 |
1.0.6 | 523 | 1/28/2021 |
1.0.5 | 999 | 1/18/2021 |
1.0.4 | 689 | 1/14/2021 |
1.0.3 | 484 | 1/13/2021 |
1.0.2 | 1,446 | 1/1/2021 |
1.0.1 | 896 | 12/25/2020 |
1.0.0 | 502 | 12/25/2020 |
0.9.3 | 497 | 12/25/2020 |
0.9.2 | 746 | 12/22/2020 |
0.9.1 | 1,208 | 12/4/2020 |
0.9.0 | 6,939 | 10/23/2020 |
0.8.1 | 1,127 | 10/4/2020 |
0.8.0 | 1,814 | 9/16/2020 |
0.7.1 | 1,688 | 8/9/2020 |
0.6.14 | 577 | 8/4/2020 |
0.6.13 | 734 | 8/2/2020 |
0.6.12 | 761 | 7/28/2020 |
0.6.11 | 554 | 7/27/2020 |
0.6.10 | 3,142 | 7/20/2020 |
0.6.9 | 659 | 7/14/2020 |
0.6.8 | 690 | 7/9/2020 |
0.6.7 | 639 | 7/7/2020 |
0.6.6 | 707 | 6/30/2020 |
0.6.5 | 1,088 | 6/4/2020 |
0.6.4 | 1,626 | 5/16/2020 |
0.6.3 | 1,028 | 5/5/2020 |
0.6.2 | 1,647 | 4/16/2020 |
0.6.1 | 755 | 3/27/2020 |
0.6.0 | 566 | 3/27/2020 |
0.5.9 | 586 | 3/26/2020 |
0.5.8 | 980 | 3/25/2020 |
0.5.7 | 563 | 3/25/2020 |
0.5.6 | 670 | 3/17/2020 |
0.5.5 | 1,562 | 3/7/2020 |
0.5.4 | 939 | 2/9/2020 |
0.5.3 | 667 | 2/8/2020 |
0.5.2 | 1,861 | 1/24/2020 |
0.5.1-alpha | 868 | 12/9/2019 |
0.4.8-alpha | 472 | 12/1/2019 |
0.4.7-alpha | 558 | 10/18/2019 |
0.4.6-alpha | 512 | 9/26/2019 |
0.4.5-alpha | 371 | 8/20/2019 |
0.4.0-alpha | 379 | 6/15/2019 |
0.3.0 | 913 | 6/1/2019 |
0.1.0 | 1,039 | 2/2/2019 |