AugusteVN.Google.Maps.Razor 1.1.5

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(ElementId: "map", MapId: "4504f8b37365c3d0", Center: new GoogleMapCoordinate(-74.0, 40.7), Zoom: 11))"
        OnMapLoaded="() => {}">

    <GoogleMapMarker Marker="@(new GoogleMapMarkerInfo(
        Info: new GoogleMapMarkerInfoWindow(Title: "Statue of Liberty", Content: "Body"),
        Position: new GoogleMapCoordinate(-74.0, 40.7),
        Clickable: true),
        Pin: new GoogleMapMarkerPin(Background: "", BorderColor: "", Glyph: "", GlyphColor: "", Scale: 1))" />

    <GoogleMapMarkers Markers="@(new GoogleMapMarkerInfo[] {
        new GoogleMapMarkerInfo(
            Info: new GoogleMapMarkerInfoWindow(Title: "Statue of Liberty", Content: "Body"),
            Position: new GoogleMapCoordinate(-74.0, 40.7),
            Clickable: true),
        new GoogleMapMarkerInfo(
            Info: new GoogleMapMarkerInfoWindow(Title: "Foo Bar"),
            Position: new GoogleMapCoordinate(-75.0, 44.1),
            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.