Finding the location using Bing Maps on Windows Phone 7.1[Code name Mango] using ASP.NET

First of all thanks to Microsoft for providing Microsoft IE 9 browser to Windows Phone 7.1(Mango Update). With the introduction of HTML 5 and CSS 3 in Microsoft IE9, web development is easier for Windows Phone devices.
In this article, let us see how to show Bing Maps on Windows Phone 7.1 device and pinning the current location on the go.

First of all, create a Bing Maps Account, which is free of cost from the link – Once you are done with creating account, log into Maps Account center and create a key by providing the “Application Name” and “Application Type”. Now copy the Key/URL and save it in notepad.

Now launch Visual Studio 2010 and create a new Web application.  Change the doctype to HTML 5 doctype, as shown below.

<!DOCTYPE html>


Add the following code in the <head> section.

<meta name="viewport" content="width=device-width" />
    <script type="text/javascript"


 Now copy the following code in the <body> section.

<form id="form1" runat="server">
         <div id="mapDiv" style="width:500px;height:500px;position:relative;" >


        <script type="text/javascript">
            //Fetch the current location using HTML 5 Geolocation
            navigator.geolocation.getCurrentPosition(showPosition, FetchingLocation_Error);

	//On Successfully fetch of location, show it on Bing Map
            function showPosition(position) {

                var mapOptions = { credentials: "Your Key/URL",
                                    mapTypeId: Microsoft.Maps.MapTypeId.aerial };

                //Display the Bing Maps in the div - mapDiv
                var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions);

                //Fetch the location using the Latitude and Longitude
                var loc = new Microsoft.Maps.Location(position.coords.latitude, position.coords.longitude);

                //Add a pin to the center of the map
                var pin = new Microsoft.Maps.Pushpin(loc);

                //Center the map on the location
                map.setView({center:loc, zoom:10});

			//If fetching of location failed, the display error message
            function FetchingLocation_Error()
                alert("Failed to fetch the location!");




Now replace the text “Your Key/URL” with the key, which you have saved already. Once you are done with it, you are done with the coding stuff. Now testing it on Windows Phone 7.1 emulator.

NOTE: The above sample won’t work in Windows Phone 7. It work’s only with Windows Phone Mango Update, for which developer tools are available from the Microsoft’s website.

                  Maps on WP7.1

For more information on Bing Maps, check the following link

Important Notes:

  • The above sample works absolutely fine in Desktop browsers too (Microsoft IE9, Mozilla Firefox 4, Google Chrome 12).
  • It also works in Mobile devices which support HTML 5 including Apple iPhone.

Happy Web programming for WP7.1!!!


Confirm Message before leaving ASP.NET Web Application

If you want to put up a confirm message to the user, so that he will be notified for any unsaved data. Check the following code snippet, which will alert the user, before close the browser/tab/moving to next page.

 <script language="JavaScript1.2" type="text/javascript">
        window.onbeforeunload = Unload_Call;

        function Unload_Call() {
            var Message = "Are you sure to leave this page?";
           return Message;

Copy the above code the page, where user needs to save information etc., The above code works in all latest browsers!

Happy Web Programming!