AugusteVN.Google.Maps.Razor 1.0.8

.NET 8.0 This package targets .NET 8.0. The package is compatible with this framework or higher.
There is a newer version of this package available.
See the version list below for details. 
dotnet add package AugusteVN.Google.Maps.Razor --version 1.0.8
                    


                    

                
NuGet\Install-Package AugusteVN.Google.Maps.Razor -Version 1.0.8
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="AugusteVN.Google.Maps.Razor" Version="1.0.8" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="AugusteVN.Google.Maps.Razor" Version="1.0.8" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="AugusteVN.Google.Maps.Razor" />
                    


                            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 AugusteVN.Google.Maps.Razor --version 1.0.8
                    


                    

                
#r "nuget: AugusteVN.Google.Maps.Razor, 1.0.8"
#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. 
#:package AugusteVN.Google.Maps.Razor@1.0.8
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=AugusteVN.Google.Maps.Razor&version=1.0.8
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=AugusteVN.Google.Maps.Razor&version=1.0.8
                    


                            Install as a Cake Tool

Google Maps JavaScript API in Razor

The Google Maps JavaScript API encapsulated in Razor components.

Razor Components

The encapsulating components below, can be implemented on Razor pages or components.

<GoogleMap
        ElementId="map"
        Config="@(new GoogleMapsConfig { ApiKey = "***", ... })"
        MapOptions="@(new GoogleMapOptions("map", -74.0, 40.7, 16))"
        OnMapLoaded="() => {}">

    <GoogleMapMarker Title="Statue of Liberty" Latitude="-74.0" Longitude="40.7" IsClickable="true" />
    <GoogleMapMarkers Markers="@(new GoogleMapMarkerInfo[] {
        new GoogleMapMarkerInfo(string Title: "Statue of Liberty", Lat: -74.0, Lng: 40.7, Clickable: true),
        new GoogleMapMarkerInfo(string Title: "Something else", Lat: -75.0, Lng: 44.2, Clickable: true)
        })" />
</GoogleMap>

Extension Methods

On the JsRuntime.

Task ImportCustomGoogleMapsJsAsync(this IJSRuntime jsRuntime);

ValueTask LoadGoogleMapsApiAsync(this IJSRuntime jsRuntime, GoogleMapsConfig config);

ValueTask InitGoogleMapAsync(this IJSRuntime jsRuntime, GoogleMapOptions mapOptions);

ValueTask AddGoogleMapMarkersAsync(this IJSRuntime jsRuntime, GoogleMapMarkerInfo[] markers);

Usage Example

@inject IJSRuntime JsRuntime

<div id="@ElementId" style="height: 100%;"></div>

@code {
    [Parameter]
    public string ElementId { get; set; } = "map";

    [Parameter]
    public GoogleMapsConfig Config { get; set; }
    
    [Parameter]
    public GoogleMapOptions MapOptions { get; set; }

    [Parameter]
    public GoogleMapMarkerInfo[] Markers { get; set; }
    
    [Parameter]
    public EventCallback OnMapLoaded { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JsRuntime.ImportCustomGoogleMapsJsAsync();
            await JsRuntime.LoadGoogleMapsApiAsync(Config);
            await JsRuntime.InitGoogleMapAsync(MapOptions);
            await JsRuntime.AddGoogleMapMarkersAsync(Markers);
            await OnMapLoaded.InvokeAsync();
        }
    }
}

To see it in action, watch: coming soon.

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

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
1.5.3 417 11/15/2024
1.5.2 164 11/14/2024
1.5.1 156 11/5/2024
1.5.0 155 11/5/2024
1.4.1 175 11/3/2024
1.3.8 134 11/3/2024
1.3.7 139 11/3/2024
1.3.3 144 11/3/2024
1.3.2 145 11/3/2024
1.3.1 145 11/3/2024
1.3.0 144 11/3/2024
1.2.9 146 10/31/2024
1.2.8 137 10/31/2024
1.2.5 172 10/24/2024
1.2.0 159 10/23/2024
1.1.9 146 10/23/2024
1.1.8 151 10/12/2024
1.1.7 211 10/12/2024
1.1.5 151 10/11/2024
1.0.8 200 10/11/2024 1.0.8 is deprecated because it is no longer maintained.
1.0.7 174 10/11/2024 1.0.7 is deprecated because it is no longer maintained.
1.0.1 172 10/10/2024 1.0.1 is deprecated because it has critical bugs.

Bugfix adding markers to the map.