Home » HTML Geolocation

HTML Geolocation

by Online Tutorials Library

HTML5 Geolocation

The Geolocation is one of the best HTML5 API which is used to identify the user’s geographic location for the web application.

This new feature of HTML5 allows you to navigate the latitude and longitude coordinates of the current website’s visitor. These coordinates can be captured by JavaScript and send to the server which can show your current location on the website

Most of the geolocation services use Network routing addresses such as IP addresses, RFID, WIFI and MAC addresses or internal GPS devices to identify the user’s location.

Tips: To completely understand the concept of Geolocation API you must have some knowledge of JavaScript.

User privacy:

The user’s location is the privacy concern, so geolocation API protects the user’s privacy by taking the user’s permission before getting the location. Geolocation API sends a notification prompt box which user can allow or deny, and if the user allows then only his location will be identified.

Note: Your browser must support the geolocation to use it for the web application. Although most of the browsers and mobile devices support the Geolocation API, and this API is only available for HTTPS request.

Geolocation object

The Geolocation API is work with the navigation.geolocation object. Its read-only property returns a Geolocation object which identifies the location of the user and can generate a customized result based on user location.

Syntax:

If this object is present, then you can get the geolocation services.

Geolocation Methods

The Geolocation API uses three methods of Geolocation interface which are given following:

Methods Description
getCurrentPosition() It identifies the device or the user’s current location and returns a position object with data.
watchPosition() Return a value whenever the device location changes.
clearWatch() It cancels the previous watchPosition() call

Checking for browser support:

The geolocation property of navigator.geolcation object helps to determine the browser support for the Geolocation API.

Test it Now

Getting the User’s current position:

To get the user’s current location, getCurrentPosition() method of the navigator.geolocation object is used. This method accepts three parameters:

  • success: A success callback function to get the location of the user
  • error: An error callback function which takes “Position Error” object as input.
  • options: It defines various options for getting the location.

The below example will return the longitude and latitude of the visitor’s current location.

Example

Test it Now

Explanation:

  • First checking the browser support
  • Getting current position with getCurrentPosition()
  • Getting latitude and longitude values with showPosition() method which is call back method of getCurrentPosition().

Handling Errors and Rejections: Using an Error callback function

The second parameter of getCurrentPosition is an error Callback function. It is an optional parameter and used to handle errors and user rejection while getting the user’s location.

Following are the possible options for invoking the error call back function:

  • Unknown random error Occurred
  • If the user has denied for sharing location
  • Location information is not available
  • Request for location is timed-out.

Example

Test it Now

Displaying location on Google Map

Till now, we have seen how to show your location using latitude and longitude values, but it is not sufficient. Hence we can also show the exact location on Google map with this API.

Following example showing the location using Google Map.

Example

Test it Now

To learn more about Google Maps JavaScript API, you can click on the following link:

https://developers.google.com/maps/documentation/javascript/reference.

Location properties

The getCurrentPosition() method of Geolocation API returns callback methods which retrieve the user location information. This callback method returns a Position Object which contains all location information and specifies different properties. It always returns latitude and longitude properties, but the following table describes some other properties of Position object.

Properties Description
coords.latitude It returns latitude of user location as a decimal number.
coords.longitude It returns longitude of user location as a decimal number.
coords.altitude It returns altitude in meters above the sea level (Only if available).
coords.accuracy It returns the accuracy of the user’s position.
coords.altitudeAccuracy It returns the altitude accuracy of user location. (If available)
coords.heading It returns headings as degree clockwise from North. (If available)
coords.speed It returns the speed in meter per seconds. (If available).
timestamp It returns data or time of response. (If available).

Watching the current location:

If we want to know the user location while he is moving and want accurate location at every changed position, then it can be achieved by using watchPosition() callback function.

This function has all three parameters which getCurrentPosition() contains.

Syntax:

The watchPosition() method returns an ID that can be used to uniquely identifying the user?s position, and this ID can also be used with clearWatch() method to stop watching the location.

Syntax:


Browser Support:

API chrome browser Chrome ie browser IE firefox browser Firefox opera browser Opera safari browser Safari
Geolocation 5.0 – 49.0 (http)
50.0 (https)
9.0 3.5 16.0 5.0
Next TopicHTML Web Storage

You may also like