HTML5 Geolocation API with Example

In this tutorial, You will get the idea about the simplest way to get the user current location. You can easily track your website visitor location using HTML5 Geolocation API.

What is the HTML5 Geolocation API?

HTML5 Geolocation API enables users to track information of their location in Web applications using latitude and longitude coordinates in the browser. HTML5 Geolocation the API mainly used to obtain the geographical position of the user. The user can share its location with a trustable Web application using the Geolocation API provided by HTML5.

To fetch the location of the visitor, a user must have to allow to determine its location.

To enable the location for any website, first thing comes in visitor’s mins is the privacy and some user doesn’t trust all the websites they visit so Browsers can not obtain information about the user’s location without the consent of the user. In other words, the user must give consent to the transfer of his location or abandon the data. The visitor location can only track by website once the user approves it.you need the approval of your user to access their location.

Understanding Geolocation API

The first of all, You need to check whether user’s browser support HTML5 Geolocation API or not.

Using this simple code, you can be able to get the idea that visitor browser supports GeoLocation API within a minute. You just need to copy and paste the code. Just make sure, you have added jquery core file. Here in above code, I have used the object navigator.geolocation which contains all three below methods of Geolocation API in HTML5 and used to retrieve location information.

• navigator.geolocation.getCurrentPosition() – Determines the visitor’s current location.
• navigator.geolocation.watchPosition () – Determines the current location of the user whenever it changes. User device itself determines the optimal polling interval.
• navigator.geolocation.clearWatch () – Stops for tracking user-initiated method watchPosition.

getCurrentPosition() and watchPosition() methods are similar except watchPosition method called on the change of position of the user and it works similar to the setInterval function without specifying the time the polling interval and is responsible for this user device itself.Method watchPosition returns the ID which is needed method clearWatch to stop tracking.

Let’s understand the syntax of getCurrentPosition as all examples are based on this method:

• success – success will have the callback function that will be called upon successful determination of user geo positions.
• error – an error will have the callback function that will be called when an error occurred
• options – An optional parameter that should be added for additional options.

An options object may include following properties:

• enableHighAccuracy – This property is for the accuracy of position determination. Set it as true for greater accuracy and false for less accurate. To enable the determination to get the geo position with great precision. For example, This tool is GPS in mobile devices. if no device doesn’t support, no effect happen on the switching of this parameter.
• timeout – This property useful for the number of milliseconds that the web application will wait to obtain a position of the user. The timer does not start counting down until the user gives permission to calculate its position.
• maximumAge – The number of milliseconds before the data is stored in the cache. That is not required to constantly redefine user geo location, and you can quickly take the old data.

The success callback function will receive object Position which contains following data of user’s location.

• Position.coords.latitude – Latitude of visitor in the form of number.
• Position. coords.longitude – Longitude of visitor in the form of numbers.
• Position.coords.accuracy – Position accuracy.
• Position.coords.altitude – Height in meters above mean sea level.
• Position.coords.altitudeAccuracy – The accuracy of the height of the position.
• Position.coords.heading – degrees clockwise from the north.
• Position.coords.speed – speed in meters per second.
• Position.timestamp – response time.

The error callback function takes an object PositionError which contains the error code and a text message.

PositionError.code – error code which is a numerical value:

1 corresponds to a constant PERMISSION_DENIED – the user has refused a location for their report;

2 corresponds to a constant POSITION_UNAVAILABLE – the network is down, there is no communication with the satellites;

3 corresponds to constant the TIMEOUT – work was completed by timeout, the definition geo position takes too much time.

PositionError.message – a message that is not intended for the user, and is more suitable for logging.

How to get current location of a user?

Now, it’s time understand the HTML5 Geolocation API with some code and example which will clear all your doubts.I know above explanation about parameter is complex and quite difficult to understand so here is the example:

Example:

Above example will display the user location if a user allows to track location when popup come and this code will display the latitude and longitude of the location. If any error occurred, an errorHandler function will handle the error and display error. You can get the location coordinates in the showLocation() function so in that function you can write desired code to perform next action on this coordinates.

Browser Support:

HTML5 Geolocation API support all modern major browsers: Firefox 3.5+, Opera 10.6+, Chrome 5+, Safari 5+ and Internet Explorer 9+.

That’s it. Let me know what you do using the HTML5 Geolocation API in your web application?. Don’t forget to share this post with your friends on Google, Facebook and Twitter!