June 2011 – Roopesh's Space

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 – http://www.bingmapsportal.com/. 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"
            src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">
    </script>

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

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

        </div>

        <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);
                map.entities.push(pin);

                //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!");
            }

        </script>

    </form>

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.

For more information on Bing Maps, check the following link http://www.microsoft.com/maps/developers/web.aspx

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!!!

Month: June 2011

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

Rate this:

Confirm Message before leaving ASP.NET Web Application

Rate this: