Bing Map Integration With ASP.NET MVC

Amit Mohanty

7y41.9k17100Article

ASP.NET MVCBing Map IntegrationBing Map Integration With ASP.NET

17 Comments

Join the conversation! Your thoughts help the community grow.

soniya gupta5y ago
For me map itself is not getting loaded, please help
Fanirisoa lalaina6y ago
Nice article, my card is loaded but does not show your 3 pins nor the markers.I would be very thankful to you.
Verlyn Luna6y ago
Hola Amit Mohanty, tengo un peque?o error, el mapa no logro hacer que se muestre, hay algun paquete que habia para descargar. Por favor espero tu respuesta. Gracias!!
- Amit Mohanty6y ago
  Hey, please replay in english.
Fatema6y ago
Uncaught ReferenceError: map is not defined at addMarker (WebForm1.aspx:50) Can you please tell me why I am getting these errors. I would be very thankful to you.
- Amit Mohanty6y ago
  Remove the async from the script and try. <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario'></script>
Fatema6y ago
The map is loaded but I am not able to see any marker on the map. In the console, I am getting the error, WebForm1.aspx:35 Uncaught ReferenceError: Microsoft is not defined at addMarker (WebForm1.aspx:35) at WebForm1.aspx:77
k s6y ago
It works but not showing india and your 3 pins!
- Amit Mohanty6y ago
  If you want to show your location then pass your location details in var locations = new List<Locations>() { new Locations(1, "Bhubaneswar","Bhubaneswar, Odisha", 20.296059, 85.824539), new Locations(2, "Hyderabad","Hyderabad, Telengana", 17.387140, 78.491684), new Locations(3, "Bengaluru","Bengaluru, Karnataka", 12.972442, 77.580643) };
Deepak M7y ago
Nice article.
- Amit Mohanty7y ago
  Thank you.
Chittaranjan Swain7y ago
Nice Article, Thanks for sharing.
- Amit Mohanty7y ago
  Thank you Chttaranjan.
Ajay Vishwakarma7y ago
Nice One Article!
- Amit Mohanty7y ago
  Thank you Ajya.
Pankajkumar Patel7y ago
Nice article
- Amit Mohanty7y ago
  Thank you Pankaj.

Introduction

There is always a requirement to use a map in your web application. In this article, we will learn how to integrate Bing map, how to add pushpins, and how to use infobox in ASP.NET MVC applications. Here, I am using Visual Studio 2019 to create the application.

Step 1

Before starting our application, we need a Bing Map API key, which you can create in here.

Step 2

After you have your API key, open Visual Studio, and click on "Create a new project".

Select ASP.NET web application from templates and click on “Next”.

Then, give the project name as “MapIntegration” and then click “Create”.

Now, choose MVC from the template and click on “Create”.

Step 3

Now, create a new class in the Models folder and name it as Locations.cs. Here, we will define all attributes like Location name, latitude, longitude, etc.

Code for Locations.cs

using System.Collections.Generic;
namespace MapIntegration.Models
{
public class Locations
{
public int LocationId { get; set; }
public string Title { get; set; }
public string Description { get; set; }
public double Latitude { get; set; }
public double Longitude { get; set; }
public Locations(int locid, string title, string desc, double latitude, double longitude)
{
this.LocationId = locid;
this.Title = title;
this.Description = desc;
this.Latitude = latitude;
this.Longitude = longitude;
}
}
public class LocationLists
{
public IEnumerable<Locations> LocationList { get; set; }
}
}

Step 4

In HomeController, we have to pass multiple location details to the View.

Code for HomeController.cs

using MapIntegration.Models;
using System.Collections.Generic;
using System.Web.Mvc;
namespace MapIntegration.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
LocationLists model = new LocationLists();
var locations = new List<Locations>()
{
new Locations(1, "Bhubaneswar","Bhubaneswar, Odisha", 20.296059, 85.824539),
new Locations(2, "Hyderabad","Hyderabad, Telengana", 17.387140, 78.491684),
new Locations(3, "Bengaluru","Bengaluru, Karnataka", 12.972442, 77.580643)
};
model.LocationList = locations;
return View(model); }
}
}

Step 5

Now, modify the Index.cshtml page with the below code.

Code for Index.cshtml

@model MapIntegration.Models.LocationLists
@{
ViewBag.Title = "Home Page";
}
<script type='text/javascript'>
function loadMapScenario() {
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: ‘Your Bing Map API Key’,
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 5
});
// Create the infobox for the pushpin
var infobox = null;
//declare addMarker function
function addMarker(latitude, longitude, title, description, pid)
{
var marker = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(latitude, longitude), { color: 'green' });
infobox = new Microsoft.Maps.Infobox(marker.getLocation(), {
visible : false
});
marker.metadata = {
id: pid,
title: title,
description: description
};
Microsoft.Maps.Events.addHandler(marker, 'mouseout', hideInfobox);
Microsoft.Maps.Events.addHandler(marker, 'mouseover', showInfobox);
infobox.setMap(map);
map.entities.push(marker);
marker.setOptions({ enableHoverStyle: true });
};
function showInfobox(e) {
if (e.target.metadata) {
infobox.setOptions({
location: e.target.getLocation(),
title: e.target.metadata.title,
description: e.target.metadata.description,
visible: true
});
}
}
function hideInfobox(e) {
infobox.setOptions({ visible: false });
}
//add markers to map
@if (Model.LocationList != null)
{
foreach (var item in Model.LocationList)
{
@:addMarker(@item.Latitude, @item.Longitude, '@item.Title', '@item.Description', @item.LocationId);
}
}
}
</script>
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario' async defer></script>
<div class="jumbotron">
<h2>MAP INTEGRATION</h2>
</div>
<div class="row">
<div class="col-md-12 map">
<div id="myMap" style="width:100%; height:610px;"></div>
</div>
</div>

In the above code, the loadMapScenario() function loads the map on pageload using map API key and latitude and longitude value.

The addMarker() function is used for mark point on the map using Pushpin and Infobox. Infobox is used for showing some information.

Here, we are adding two event handlers - "mouseout" and "mouseover". On mouseover event, we are showing some details about the point using showInfobox() function and on the mouseout event, we hide the infobox.

Step 6

Now, press F5 to launch the application or Run the application. You can see the page as shown below.

When you move your mouse towards a point, it will show details about the page using infobox like in the below image.