How to show user’s current location on Bing map in a website

Introduction

In this article I will explain how to mark user’s current location on Bing map in a website using “Bing Maps AJAX Control 7.0 ISDK”. We will GeoLocationProvider Class of this Bing Maps API to retrieve user’s location. This class uses W3C GeoLocation API to get users location. So this feature will be available to those browsers that support this API.

GetCurrentLocationBingMap

Description

Create an HTML file or an ASP.NET Web Application and write following in the BODY section of the HTML file or HTML source of the ASP.NET application

GetMap

Write following script in the HEAD section of HTML

GetCurrentLocationBingMapCode

getCurrentPosition method of the GeoLocationProvider class is used to get location of the browser. ZoomIn is the callback function that  is called when getCurrentPosition returns successful location. It centers the map to the current location with zoom level as 5. addAccuracyCircle method of the GeoLocationProvider class adds circle to the current location according to the accuracy level of the location provider. Circle’s border thickness, border color and body color is set using polygonOptions property. These colors is set using Color class which takes opacity, r, g and b as parameters.Range of these parameters values are between 0 and 255.

You can refer to my previous article on How to integrate Bing map in your website if you are new to the Bing map API

Complete code

<html xmlns="http://www.w3.org/1999/xhtml">
     <head runat="server">
          <title>
               Current Location of User in Bing Map
          </title>
          <script type="text/javascript"
               src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">
          </script>
          <script type="text/javascript">
               var map = null;
               function GetMap() {
                    map = new Microsoft.Maps.Map(document.getElementById('myMap'),
                         { credentials: 'Your Bing map key' });

                    // Gets current location of user and calls ZoomIn function on success
                    var geoLocationProvider = new Microsoft.Maps.GeoLocationProvider(map);
                    geoLocationProvider.getCurrentPosition({ successCallback: ZoomIn});

                    // Zooms the map to current location
                    function ZoomIn(args) {
                         map.setView({
                             zoom: 5,
                             center: args.center
                         });

                         // Marks current location with a circle and sets its border width,
                         // border color and body color
                         geoLocationProvider.addAccuracyCircle(args.center, 50000, 50000, {
                              polygonOptions: {
                                   strokeThickness:2,
                                   fillColor: new Microsoft.Maps.Color(200, 255, 128, 0),
                                   strokeColor: new Microsoft.Maps.Color(255, 0, 128, 0)
                              }
                         });
                    }
               }
          </script>
     </head>
     <body onload="GetMap();">
          <form id="form1" runat="server">
               <div id="myMap"
                    style="position:relative; width:600px; height:600px;">
               </div>
          </form>
     </body>
</html>

One thought on “How to show user’s current location on Bing map in a website

Leave a Reply

Your email address will not be published. Required fields are marked *