AugusteVN.Google.Maps.Razor 1.3.1

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); }">

    <GoogleMapMarker Marker="@(new GoogleMapMarkerInfo(
        Title: "Statue of Liberty",
        Info: new GoogleMapMarkerInfoWindow(HeaderContent: "Custom", Content: "Body"),
        Position: new GoogleMapCoordinate(-74.0, 40.7),
        Clickable: true,
        Pin: new GoogleMapMarkerPin(Background: "#hex-code", BorderColor: "#hex-code", Content: "short-text", Color: "#hex-code", Scale: 1))" />

    <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);

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

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 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.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