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

Please find the sample below.

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>
@page "/bingmaps"
@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); 


Share with

Related FAQs

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

Please submit your question and answer.