HTML 5, Bing Map Control to Show your Current Location

- March 25, 2013

Hi Guys,

My this post simply shows you how to use the HTML 5 navigator object and Bing Map Control to show your current location.

Before you Start,

1) You need to have an HTML 5 Compatible browser. Duh, almost all the new browsers supports it.
2) A text Editor (Notepad, Wordpad would do)
3) A Bing API Key (You can get one from www.bingmapsportal.com by registering)

Step One : Open the Text Editor and Paste Following HTML and Save it as HTML.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
      <script type="text/javascript">
      var map = null,lat,lng;

function errorHandler()
{
}

      function getMap()
      {
                 if (navigator.geolocation) {
                        navigator.geolocation.getCurrentPosition(function(position) {
                       lat = position.coords.latitude; lng = position.coords.longitude;

                    }, errorHandler);
                    }

        map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: YOUR_KEY_HERE'});

      }

function setView()
{
map.setView({zoom: 12, center: new Microsoft.Maps.Location(lat, lng)});

}
     function pushPin()
{
var pushpin= new Microsoft.Maps.Pushpin(map.getCenter(), null);
        map.entities.push(pushpin);

        map.entities.push(pushpin);
        pushpin.setLocation(new Microsoft.Maps.Location(lat, lng));
        map.setView({center: new Microsoft.Maps.Location(lat, lng)});

}

      </script>

</head>
<body onload="getMap();">
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>

<div>
         <input type="button" value="SetView" onclick="setView();" />
      </div>
<div>
         <input type="button" value="PushPin" onclick="pushPin();" />
      </div>

</body>
</html>

Step Two : Double click, run and Allow the browser to get Your Current location.