BlazorGoogleMaps 4.9.2

dotnet add package BlazorGoogleMaps --version 4.9.2                
NuGet\Install-Package BlazorGoogleMaps -Version 4.9.2                
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.9.2" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add BlazorGoogleMaps --version 4.9.2                
#r "nuget: BlazorGoogleMaps, 4.9.2"                
#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.
// Install BlazorGoogleMaps as a Cake Addin
#addin nuget:?package=BlazorGoogleMaps&version=4.9.2

// Install BlazorGoogleMaps as a Cake Tool
#tool nuget:?package=BlazorGoogleMaps&version=4.9.2                

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

NuGet packages (3)

Showing the top 3 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

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
4.9.2 454 12/14/2024
4.9.1 2,202 11/21/2024
4.9.0 1,565 11/17/2024
4.8.0 220 11/16/2024
4.7.15 94 11/16/2024
4.7.14 7,349 10/9/2024
4.7.13 1,691 10/3/2024
4.7.12 1,444 9/29/2024
4.7.11 8,256 8/29/2024
4.7.10 427 8/28/2024
4.7.9 126 8/28/2024
4.7.8 170 8/28/2024
4.7.7 1,002 8/25/2024
4.7.6 3,941 8/12/2024
4.7.5 185 8/11/2024
4.7.4 138 8/10/2024
4.7.3 1,993 7/29/2024
4.7.2 1,407 7/25/2024
4.7.1 4,296 7/8/2024
4.7.0 294 7/4/2024
4.6.2 344 7/2/2024
4.6.1 188 7/1/2024
4.6.0 823 6/26/2024
4.5.0 912 6/22/2024
4.4.2 4,001 6/12/2024
4.4.1 240 6/11/2024
4.4.0 199 6/10/2024
4.3.0 6,181 5/15/2024
4.2.0 5,682 4/25/2024
4.1.2 8,183 3/21/2024
4.1.1 481 3/20/2024
4.1.0 25,576 2/2/2024
4.0.3 894 1/18/2024
4.0.2 4,441 12/20/2023
4.0.1 1,875 12/17/2023
4.0.0 257 12/15/2023
3.3.2 14,462 12/15/2023
3.3.1 8,726 12/5/2023
3.2.5 2,596 11/23/2023
3.2.4 177 11/23/2023
3.2.3 7,575 10/30/2023
3.2.2 1,819 10/25/2023
3.2.1 253 10/25/2023
3.2.0 4,672 9/18/2023
3.1.4 3,804 9/9/2023
3.1.3 575 9/3/2023
3.1.2 7,746 8/1/2023
3.1.1 5,175 7/19/2023
3.1.0 2,052 7/10/2023
3.0.8 274 7/9/2023
3.0.7 10,490 6/9/2023
3.0.6 6,394 5/7/2023
3.0.5 3,680 4/13/2023
3.0.4 466 4/11/2023
3.0.3 1,393 4/6/2023
3.0.2 607 4/3/2023
3.0.1 357 4/1/2023
3.0.0 1,859 3/28/2023
2.5.7 12,517 3/14/2023
2.5.6 969 3/13/2023
2.5.5 3,834 2/24/2023
2.5.4 10,210 2/11/2023
2.5.3 959 2/6/2023
2.5.2 2,912 1/20/2023
2.5.1 1,221 1/17/2023
2.4.4 10,895 12/13/2022
2.4.3 6,665 11/29/2022
2.4.2 381 11/29/2022
2.4.1 1,519 11/25/2022
2.3.1 2,825 11/14/2022
2.2.6 26,618 9/5/2022
2.2.5 1,602 8/27/2022
2.2.4 443 8/27/2022
2.2.3 1,433 8/22/2022
2.2.2 578 8/19/2022
2.2.1 27,327 6/28/2022
2.2.0 2,994 6/20/2022
2.1.1 2,448 5/23/2022
2.1.0 2,234 5/3/2022
2.0.6 728 4/30/2022
2.0.5 1,739 4/21/2022
2.0.4 1,466 4/15/2022
2.0.3 1,124 4/1/2022
2.0.2 574 3/30/2022
2.0.1 511 3/30/2022
2.0.0 1,229 3/29/2022
1.5.5 11,573 2/24/2022
1.5.4 684 2/21/2022
1.5.3 1,944 2/16/2022
1.5.2 706 2/15/2022
1.5.1 4,162 2/7/2022
1.4.2 6,992 12/15/2021
1.4.1 6,420 12/8/2021
1.4.0 385 12/7/2021
1.3.0 538 12/2/2021
1.2.1 16,566 10/11/2021
1.1.8 1,365 9/27/2021
1.1.7 543 9/25/2021
1.1.6 418 9/23/2021
1.1.5 1,326 9/16/2021
1.1.4 1,292 9/12/2021
1.1.3 576 9/9/2021
1.1.2 778 9/7/2021
1.1.1 1,321 8/30/2021
1.0.17 2,201 7/27/2021
1.0.16 843 7/17/2021
1.0.15 8,975 4/29/2021
1.0.14 5,675 4/9/2021
1.0.13 28,657 3/18/2021
1.0.12 4,410 2/13/2021
1.0.11 589 2/10/2021
1.0.10 445 2/10/2021
1.0.9 423 2/10/2021
1.0.8 790 2/3/2021
1.0.7 4,012 1/30/2021
1.0.6 499 1/28/2021
1.0.5 973 1/18/2021
1.0.4 664 1/14/2021
1.0.3 459 1/13/2021
1.0.2 1,423 1/1/2021
1.0.1 871 12/25/2020
1.0.0 477 12/25/2020
0.9.3 473 12/25/2020
0.9.2 723 12/22/2020
0.9.1 1,178 12/4/2020
0.9.0 6,918 10/23/2020
0.8.1 1,103 10/4/2020
0.8.0 1,789 9/16/2020
0.7.1 1,663 8/9/2020
0.6.14 553 8/4/2020
0.6.13 710 8/2/2020
0.6.12 737 7/28/2020
0.6.11 531 7/27/2020
0.6.10 2,803 7/20/2020
0.6.9 635 7/14/2020
0.6.8 666 7/9/2020
0.6.7 615 7/7/2020
0.6.6 684 6/30/2020
0.6.5 1,053 6/4/2020
0.6.4 1,598 5/16/2020
0.6.3 998 5/5/2020
0.6.2 1,618 4/16/2020
0.6.1 728 3/27/2020
0.6.0 539 3/27/2020
0.5.9 559 3/26/2020
0.5.8 953 3/25/2020
0.5.7 535 3/25/2020
0.5.6 643 3/17/2020
0.5.5 1,504 3/7/2020
0.5.4 904 2/9/2020
0.5.3 641 2/8/2020
0.5.2 1,833 1/24/2020
0.5.1-alpha 837 12/9/2019
0.4.8-alpha 444 12/1/2019
0.4.7-alpha 525 10/18/2019
0.4.6-alpha 481 9/26/2019
0.4.5-alpha 341 8/20/2019
0.4.0-alpha 350 6/15/2019
0.3.0 878 6/1/2019
0.1.0 958 2/2/2019