AugusteVN.Google.Maps.Razor 1.5.3

Google Maps JavaScript API in Razor

The Google Maps JavaScript API encapsulated in Razor components.

Register

appSettings.json

{
  "GoogleMapsConfig": {
    "ApiKey": "xxx",
    "MapId": "4504f8b37365c3d0"
  }
}

Program.cs

builder.Services
    .AddOptions<GoogleMapsConfig>()
    .BindConfiguration(nameof(GoogleMapsConfig));

builder.Services.AddGoogleMaps(builder.Configuration);

Razor Components

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

<GoogleMap
    ElementId="map"
    Config="@(new GoogleMapsLoadConfig { ApiKey = "***", ... })"
    MapOptions="@(new GoogleMapOptions(ElementId: "map", MapId: "4504f8b37365c3d0"))"
    Center="@(new GoogleMapCoordinate(-74.0, 40.7))"
    Zoom="11"
    OnMapLoaded="() => {}"
    OnMapDetailsChanged="(details) => { Console.WriteLine(details.EventName); }">

    <GoogleMapMarkers Markers="@(new GoogleMapMarkerInfo[] {
        new GoogleMapMarkerInfo(
            Title: "Statue of Liberty",
            Info: new GoogleMapMarkerInfoWindow(HeaderContent: "<h3>Custom HTML</h3>", Content: "<div>Body</div>"),
            Position: new GoogleMapCoordinate(-74.0, 40.7),
            Clickable: true,
            Pin: new GoogleMapMarkerPin(Content: "<div><h3>Custom HTML</h3></div>")
        ),
        new GoogleMapMarkerInfo(
            Title: "Foo Bar",
            Info: new GoogleMapMarkerInfoWindow(IsHeaderDisabled: true, new GoogleMapMarkerInfoWindowOptions(DisableAutoPan: true)),
            Position: new GoogleMapCoordinate(-75.0, 44.1),
            Clickable: true,
            Pin: new GoogleMapMarkerPin(Content: "<span class="bi bi-person"></span>")
        )
    })"/>
</GoogleMap>

Extension Methods

On the JsRuntime.

Task ImportCustomGoogleMapsJsAsync(this IJSRuntime jsRuntime);

ValueTask LoadGoogleMapsApiAsync(this IJSRuntime jsRuntime, GoogleMapsLoadConfig config);

ValueTask InitGoogleMapAsync(this IJSRuntime jsRuntime, GoogleMapOptions mapOptions, GoogleMapCoordinate center, double zoom, GoogleMapControls? controls)

ValueTask SetGoogleMapCenterAsync(this IJSRuntime jsRuntime, GoogleMapCoordinate center);

ValueTask SetGoogleMapZoomAsync(this IJSRuntime jsRuntime, double zoom);

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

ValueTask UnsetGoogleMapMarkersAsync(this IJSRuntime jsRuntime);

Usage Example

@inject IJSRuntime JsRuntime

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

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

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

    [Parameter]
    public GoogleMapCoordinate Center { get; set; }
    
    [Parameter]
    public double Zoom { get; set; }
    
    [Parameter]
    public GoogleMapControls? Controls { get; set; }

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

    [Parameter]
    public EventCallback<GoogleMapDetails> OnMapDetailsChanged { get; set; }

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

To see it in action, watch: Google Maps API JavaScript Tutorial with Blazor C# .NET 8. Overview Google Maps JavaScript API

More reads:

• JavaScript Interop with Blazor WASM
• Google Maps getBounds