bing map exmple MVC asp.net

In this example we  have shown to you how to use bing map mvc. frist we have create method in controllor as shown the example

 public ActionResult Map()

        {

          

            //get loaction or latitude longitude according to databases            

            List<PushPinModel> pushPinCollection = new List<PushPinModel>();

            pushPinCollection.Add(new PushPinModel { latittude = "43.4155817799037", longitude = "-123.345552938182", title = "tejjs", type = "Atm" });

            pushPinCollection.Add(new PushPinModel { latittude = "44.0504273726889", longitude = "-121.354689398906", title = "help", type = "Atm" });

            ViewBag.data = pushPinCollection.ToArray();

            return View();

        }

        [HttpPost]

        public ActionResult Map(FormCollection model)

        {

            var search = model["search"].ToString();

            var atm = model["atm"].ToString();

            //get loaction or latitude longitude according to databases            

            return View();

        }

Html

@using System.Web.Script.Serialization;

@{

    ViewBag.Title = "Map";

    //var longLat = ViewBag.data;

    var json = new JavaScriptSerializer().Serialize(ViewBag.data);

   

}

<h2>Map</h2>

@using (Html.BeginForm())

{

    <div>

        <input type="text" name="search" value="" /> search

        ATM<input name="atm" type="checkbox" value="atm" />  Branch <input type="checkbox"value="Branch" />  Branch

        <input type="submit" />

    </div>

}

<script type="text/javascript">

    $(function () {

        var jsarry = @Html.Raw(json);

       // alert(jsarry[0].latittude);

      

        load(jsarry);

    });

</script>

<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"type="text/javascript"></script>

<script language="javascript" type="text/javascript">

    var map = null;

    var currentShape = null;

    var pinHTML = "<div class='pinStyle'>{0}</div>";

    var notOver = true;

    function load(jsarry) {

        alert("hello")

        //Create Map

        map = new VEMap('MapDiv');

        mapCenter = new VELatLong(43.4155817799037, -123.345552938182)

        map.LoadMap();

        map.SetMapStyle(VEMapStyle.Shaded);

        map.SetMouseWheelZoomToCenter(false);

        map.SetCenterAndZoom(mapCenter, 9);

        // Attach the event handlers to the mouse

        map.AttachEvent("onmouseover", mouseOverHandler);

        map.AttachEvent("onmouseout", mouseOutHandler);

        var view = map.GetMapView();

        var topLeft = view.TopLeftLatLong;

        var bottomRight = view.BottomRightLatLong;

        var latSpan = bottomRight.Latitude - topLeft.Latitude;

        var longSpan = bottomRight.Longitude - topLeft.Longitude;

        for (i = 0; i <= jsarry.length-1; i++) {

            var pinLatLong = new VELatLong(jsarry[i].latittude,jsarry[i].longitude );

            var marker = new VEShape(VEShapeType.Pushpin, pinLatLong);

            var currentPinHTML = pinHTML.replace('{0}', i);

            marker.SetTitle(jsarry[i].title);

            marker.SetDescription('sddsd');

            marker.SetCustomIcon(currentPinHTML);

            map.AddShape(marker);

            //Build out sidebar

            var itemHTML = '';

            var currentMarkerID = marker.GetID();

            currentPinHTML = currentPinHTML.replace('<div ', '<div id=\'sideBarMarker_' + currentMarkerID + '\' ');

            itemHTML += '<p><span onmouseover="mouseOverSidebarItem(\'' + marker.GetID() +'\');" onmouseout="mouseOutSidebarItem(\'' + marker.GetID() + '\');">';

            itemHTML += currentPinHTML;

            itemHTML += jsarry[i].title+'<br/>';

            itemHTML += currentMarkerID + '<br/>';

            itemHTML += '</span><br/></p>';

            document.getElementById('SideBar').innerHTML += itemHTML;

        }

    }

    function mouseOverHandler(e) {

        if (e.elementID && notOver) {

            mouseOverSidebarItem(e.elementID)

            notOver = false;

        }

    }

    function mouseOutHandler(e) {

        if (e.elementID && !notOver) {

            mouseOutSidebarItem(e.elementID)

            notOver = true;

        }

    }

    function mouseOverSidebarItem(markerId) {

        //Update pushpin

        currentShape = map.GetShapeByID(markerId);

        currentIcon = currentShape.GetCustomIcon();

        currentShape.SetCustomIcon(currentIcon.replace('pinStyle', 'pinHoverStyle'));

        map.ShowInfoBox(currentShape);

        //Update side bar icon

        var sideBarIconId = 'sideBarMarker_' + currentShape.GetID();

        document.getElementById(sideBarIconId).className = 'pinHoverStyle';

    }

    function mouseOutSidebarItem(markerId) {

        //Update pushpin

        currentShape = map.GetShapeByID(markerId);

        currentIcon = currentShape.GetCustomIcon();

        currentShape.SetCustomIcon(currentIcon.replace('pinHoverStyle', 'pinStyle'));

        map.HideInfoBox(currentShape);

        //Update side bar icon

        var sideBarIconId = 'sideBarMarker_' + currentShape.GetID();

        document.getElementById(sideBarIconId).className = 'pinStyle';

    }

</script>