How do you add Bing Maps to a Blazor application?

To add Bing Maps to a Blazor application follow the steps.

• Include the Bing Maps Web API scripts in the index.html/_Host.cshtml/_Layout.cshtml, This is used to retrieve the Bing Maps-related information by sending a request to the Bing Maps server and loading the same to the Blazor application. 
• Initialize maps in a Blazor application by using a JavaScript interop in the razor file [index.razor].

[Script.js]

function loadBingMap() { 
    var map = new Microsoft.Maps.Map(document.getElementById('map'), {}); 
    var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null); 
    map.entities.push(pushpin); 
    return ""; 
} 

[index.html/_Host.cshtml/_Layout.cshtml]

<script src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=api_key' type='text/javascript'></script> 

[Razor file] 

@page "/" 
@inject IJSRuntime JSRuntime 
<h1>Display Bing Map</h1> 
<div id="map" style="height:500px;width:100%;"> </div> 
@code { 
    protected override async Task OnAfterRenderAsync ( bool firstRender ) 
    { 
        if (firstRender) 
        { 
            await JSRuntime.InvokeVoidAsync("loadBingMap", null); 
        } 
    } 
}

View Sample in GitHub