HTML 5, Bing Map Control to Show your Current Location

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 by registering)

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <script type="text/javascript" src=""></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);

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


 <body onload="getMap();">
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
         <input type="button" value="SetView" onclick="setView();" />
         <input type="button" value="PushPin" onclick="pushPin();" />


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

Step 3 : Click SetView Button Then the Push Pin to insert a Pin to your Current Location.