Bing Map Integration With ASP.NET MVC

In this article, you will learn how to integrate Bing map in ASP.NET MVC application and mark some locations in the map.

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".
 
Bing Map Integration With ASP.NET MVC
 
Select ASP.NET web application from templates and click on “Next”.
 
Bing Map Integration With ASP.NET MVC
 
Then, give the project name as “MapIntegration” and then click “Create”.
 
Bing Map Integration With ASP.NET MVC
 
Now, choose MVC from the template and click on “Create”.
 
Bing Map Integration With ASP.NET MVC
 
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
  1. using System.Collections.Generic;  
  2.   
  3. namespace MapIntegration.Models  
  4. {  
  5.     public class Locations  
  6.     {  
  7.         public int LocationId { getset; }  
  8.         public string Title { getset; }  
  9.         public string Description { getset; }  
  10.         public double Latitude { getset; }  
  11.         public double Longitude { getset; }  
  12.   
  13.         public Locations(int locid, string title, string desc, double latitude, double longitude)  
  14.         {  
  15.             this.LocationId = locid;  
  16.             this.Title = title;  
  17.             this.Description = desc;  
  18.             this.Latitude = latitude;  
  19.             this.Longitude = longitude;  
  20.         }  
  21.     }  
  22.   
  23.     public class LocationLists  
  24.     {  
  25.         public IEnumerable<Locations> LocationList { getset; }  
  26.     }  
  27. }  
Step 4
 
In HomeController, we have to pass multiple location details to the View.
 
Code for HomeController.cs
  1. using MapIntegration.Models;  
  2. using System.Collections.Generic;  
  3. using System.Web.Mvc;  
  4.   
  5. namespace MapIntegration.Controllers  
  6. {  
  7.     public class HomeController : Controller  
  8.     {  
  9.         public ActionResult Index()  
  10.         {  
  11.             LocationLists model = new LocationLists();  
  12.             var locations = new List<Locations>()  
  13.             {  
  14.                 new Locations(1, "Bhubaneswar","Bhubaneswar, Odisha", 20.296059, 85.824539),  
  15.                 new Locations(2, "Hyderabad","Hyderabad, Telengana", 17.387140, 78.491684),  
  16.                 new Locations(3, "Bengaluru","Bengaluru, Karnataka", 12.972442, 77.580643)  
  17.             };  
  18.             model.LocationList = locations;  
  19.             return View(model);        }  
  20.     }  
  21. }  
Step 5
 
Now, modify the Index.cshtml page with the below code.
 
Code for Index.cshtml
  1. @model MapIntegration.Models.LocationLists  
  2. @{  
  3.     ViewBag.Title = "Home Page";  
  4. }  
  5.   
  6. <script type='text/javascript'>  
  7.     function loadMapScenario() {  
  8.         var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {  
  9.             credentials: ‘Your Bing Map API Key’,  
  10.             mapTypeId: Microsoft.Maps.MapTypeId.road,  
  11.             zoom: 5  
  12.         });  
  13.   
  14.         // Create the infobox for the pushpin  
  15.         var infobox = null;  
  16.   
  17.         //declare addMarker function  
  18.         function addMarker(latitude, longitude, title, description, pid)  
  19.         {  
  20.             var marker = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(latitude, longitude), { color: 'green' });  
  21.   
  22.             infobox = new Microsoft.Maps.Infobox(marker.getLocation(), {  
  23.                 visible : false  
  24.             });  
  25.   
  26.             marker.metadata = {  
  27.                 id: pid,  
  28.                 title: title,  
  29.                 description: description  
  30.             };  
  31.   
  32.             Microsoft.Maps.Events.addHandler(marker, 'mouseout', hideInfobox);  
  33.             Microsoft.Maps.Events.addHandler(marker, 'mouseover', showInfobox);  
  34.   
  35.             infobox.setMap(map);  
  36.             map.entities.push(marker);  
  37.             marker.setOptions({ enableHoverStyle: true });  
  38.         };  
  39.   
  40.         function showInfobox(e) {  
  41.             if (e.target.metadata) {  
  42.                 infobox.setOptions({  
  43.                     location: e.target.getLocation(),  
  44.                     title: e.target.metadata.title,  
  45.                     description: e.target.metadata.description,  
  46.                     visible: true  
  47.                 });  
  48.             }  
  49.         }  
  50.   
  51.         function hideInfobox(e) {  
  52.             infobox.setOptions({ visible: false });  
  53.         }  
  54.   
  55.         //add markers to map  
  56.         @if (Model.LocationList != null)  
  57.         {  
  58.             foreach (var item in Model.LocationList)  
  59.             {  
  60.                 @:addMarker(@item.Latitude, @item.Longitude, '@item.Title''@item.Description', @item.LocationId);  
  61.             }  
  62.         }  
  63.     }  
  64. </script>  
  65. <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario' async defer></script>  
  66.   
  67. <div class="jumbotron">  
  68.     <h2>MAP INTEGRATION</h2>  
  69. </div>  
  70.   
  71. <div class="row">  
  72.     <div class="col-md-12 map">  
  73.         <div id="myMap" style="width:100%; height:610px;"></div>  
  74.     </div>  
  75. </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.
 
Bing Map Integration With ASP.NET MVC
 
When you move your mouse towards a point, it will show details about the page using infobox like in the below image.
 
Bing Map Integration With ASP.NET MVC