Bing Map Integration with ASP.NET MVC 4.5

A few issues and recommendations:

• The main issue is that your latitude and longitude values are strings and are never parsed as floats/numbers. As such the map is getting string values for locations when it is expecting numbers.
• Your code is using Bing Maps V7 which was replaced by V8 a while ago. V7 is nearing end of life and will be turned off at the end of June. This is the new map script URL to V8: http://www.bing.com/api/maps/mapcontrol
• document.ready will fire long before the map script will load as it loads asynchronously. In fact, document.ready sometimes will fire before the whole page is loaded which means your map div might not event be available. I suggest using the callback parameter of the map script UR: for example: http://www.bing.com/api/maps/mapcontrol?callback=LoadMap
• You are setting the view of the map in a loop, this should work, but will cause a lot of extra refreshes for nothing which will cost you in load performance.
• A couple of recommendations:
  • add your pushpins to an array then add the array to the map. This will reduce the number of refreshes needed.
  • move your scripts to the bottom of the page and call the map script URL last since it loads asynchronously. When the map script is cached it and you press "refresh", the callback gets called instantly and often before the rest of your code is loaded. Moving this line of code to the bottom allows your page to load the fastest it can.

Here is some suggested modifications to your code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Map.Models
{
    public class Locations
    {
        public double latitude { get; set;}
        public double longitude { get; set;}

        public Locations(double latitude, double longitude)
        {
            this.latitude = latitude;
            this.longitude = longitude;
        }
    }
}

Your controller:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Map.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult GetLocations()
        {
            var locations = new List<Models.Locations>()
            {
                new Models.Locations(12.505353,55.335292),
                 new Models.Locations(13.505353,55.485292),
                  new Models.Locations(13.655353,55.665292)
            };
            return Json(locations, JsonRequestBehavior.AllowGet);
        }
    }
}

Your view:

@{
    ViewBag.Title = "Home Page";
}

<h2>Bing Map integration in ASP.NET</h2>
<input type="button" id="btnShowLocations" value ="Show All Locations" />

<div id="myMap" style="position:relative; width:600px; height:600px;"></div>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var map = null;

function LoadMap() {
    map = new Microsoft.Maps.Map('#myMap', {
            credentials: "Bing map key"
        });
}

$('#btnShowLocations').click(function () {
    var url = "/Home/GetLocations";
    $.getJSON(url, null, function (data) {
        var pins = [];

        $.each(data, function (index, LocationData) {
            var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(
                LocationData.latitude,
                LocationData.longitude));

            pins.push(pushpin);
        });

        map.entities.push(pins);

        map.setView({
            zoom: 4, center: new Microsoft.Maps.Location(23.505353, 78.485292)
        });
    });
});
</script>
<script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?callback=LoadMap" async defer></script>