AugusteVN.Google.Maps.Razor 1.0.1

Prism.js in Razor

The Prism.js syntax highlighter for HTML code blocks, encapsulated in Razor components.

Razor Components

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

<GoogleMap ElementId="map" Config="@_config" MapOptions="@_options" OnMapLoaded="() => {}" />

@code {
    private GoogleMapsConfig _config => new() { ApiKey = "...", ... };
    private GoogleMapOptions _config => new(ElementId: "map", Latitude: 1.1, Longitude: 1.1, MapZoom: 12);
}

Extension Methods

Task ImportCustomGoogleMapsJsAsync(this IJSRuntime jsRuntime);

ValueTask LoadGoogleMapsApiAsync(this IJSRuntime jsRuntime, GoogleMapsConfig config);

ValueTask InitGoogleMapAsync(this IJSRuntime jsRuntime, GoogleMapOptions mapOptions);

Usage Example

@inject IJSRuntime JsRuntime

@code {
    [Parameter]
    public GoogleMapsConfig Config { get; set; }
    
    [Parameter]
    public GoogleMapOptions MapOptions { 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 OnMapLoaded.InvokeAsync();
        }
    }
}

To see it in action, watch: coming soon.