HTML5 Geolocation Sample Code

We are building sample code for the The HTML5 myLocation() function. This function is used to determine coordinates of a browser when this function is called. Browsers make a call to this function as soon as they access to the location information. This call is made with one single parameter called "position object". This "position object" has three different attributes that you will always need for your online application.

The HTML5 updateLocation() position object attributes:

  • latitude specified in decimal degrees
  • longitude specified in decimal degrees
  • accuracy specified in %

The HTML5 position object’s attributes will always have values and these values are essential for the Geolocation API to work properly. 

Note: accuracy attribute is very import as not to confuse your application user. Approximation of the accuracy allows you to notify user that place they are trying to find is "near" his or her current location. 

There are other attributes of the position object which may or may not be supported by all browsers and you should exercise caution when using these attributes.

  • altitude
  • altitudeAccuracy
  • heading
  • speed

Let’s take a look how myLocation() function is used to populate position object with the required location information. The way to make a call we need to pass this function to our HTML5 Geolocation API as parameter.

Let’s look at two ways of passing this function to the HTML5 Geolocation API. First, we pass myLocation() function in order to access position object once with the help of getCurrentPosition methods. We make a function call watchPosition if we want to access position object continuously. 

navigator.geolocation.getCurrentPosition(myLocation,errorHandler);

navigator.geolocation.watchPosition(myLocation, errorHandler);

HTML5 Geolocation API sample code is provided below. Please not that you need to replace "HTML input element Id") with your own DHTML elements of the page.

    <script>

                 

    function myLocation (position)             {

                  var my_latitude = position.coords.latitude;

                  var my_longitude = position.coords.longitude;

                  var my_accuracy = position.coords.accuracy;

                  var my_timestamp = position.timestamp;

                 

        document.getElementById("HTML input element Id").innerHTML = my_latitude;

        document.getElementById("HTML input element Id").innerHTML = my_longitude;

        document.getElementById("HTML input element Id").innerHTML = my_accuracy;

        document.getElementById("HTML input element Id").innerHTML = my_timestamp;

        }

    </script>

Featured pages

Overview

Learn about HTML5 architecture, design principles and patterns on HTML5 Overview Tutorial. Become …

Tags

Learn about HTML5 tags and discover a new list of HTML5 tags. Find out about HTML5 tags support by…

Welcome

 Learn HTML5 development techniques, tips and tricks on our website. Find out what is required…

Date Time Picker

HTML5 forms use date and time controls regularly. HTML5 date and time controls are used by booking …