AugusteVN.Google.Maps.Razor 1.0.7

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.