BlazorGoogleMaps 4.10.1

dotnet add package BlazorGoogleMaps --version 4.10.1
                    
NuGet\Install-Package BlazorGoogleMaps -Version 4.10.1
                    
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="BlazorGoogleMaps" Version="4.10.1" />
                    
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="BlazorGoogleMaps" Version="4.10.1" />
                    
Directory.Packages.props
<PackageReference Include="BlazorGoogleMaps" />
                    
Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.
paket add BlazorGoogleMaps --version 4.10.1
                    
#r "nuget: BlazorGoogleMaps, 4.10.1"
                    
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
#addin nuget:?package=BlazorGoogleMaps&version=4.10.1
                    
Install BlazorGoogleMaps as a Cake Addin
#tool nuget:?package=BlazorGoogleMaps&version=4.10.1
                    
Install BlazorGoogleMaps as a Cake Tool

BlazorGoogleMaps

Blazor interop for GoogleMap library

NuGet version (BlazorGoogleMaps)

Usage

  1. 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>
  1. 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>
  1. 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 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. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

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