Bing Map Integration With ASP.NET MVC

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.