Get a bing maps api key from here
Create you blazor client side app.
Locate the index.html file under wwwroot/pages Add the following lines in the body section
<script src="script.js"></script>
<script src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=your-api-key-from-above' type='text/javascript'></script>
Add a js file at the root level in wwwroot called script.js Add the following lines in the script file.
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 "";
}
Locate the page where you want the map to appear such as index.razor for example in the views folder. Leave the @page directive as it is.
Add the following lines
@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);
}
}
}
Build and run. 😀