Live Chat Icon For mobile
Live Chat Icon

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


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


<script src='' 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

Share with

Related FAQs

Couldn't find the FAQs you're looking for?

Please submit your question and answer.