The Geolocation API of HTML5 helps in identifying the user’s location, which can be used to provide location specific information or route navigation details to the user.

There are many techniques used to identify the location of the user. A desktop browser generally uses WIFI or IP based positioning techniques whereas a mobile browser uses cell triangulation, GPS, A-GPS, WIFI based positioning techniques, etc. The Geolocation API will use any one of these techniques to identify the user’s location.

The Geolocation API protects the user’s privacy by mandating that the user permission should be sought and obtained before sending the location information of the user to any website. So the user will be prompted with a popover or dialog requesting for the user’s permission to share the location information. The user can accept or deny the request.

Now let us first understand the API and then plot your location in the Google Maps.

The first step in using any of the APIs in HTML5 is to check for its compatibility with the browser.

Check for Browser compatibility

The geolocation property of the global navigator object helps in detecting the browser support for the Geolocation API.

if ( navigator . geolocation ) { } else { alert ( 'Geolocation is not supported in your browser' ) ; }

Get the user’s current location

The current location of the user can be obtained using the getCurrentPosition function of the navigator.geolocation object. This function accepts three parameters – Success callback function, Error callback function and position options. If the location data is fetched successfully, the success callback function will be invoked with the obtained position object as its input parameter. Otherwise, the error callback function will be invoked with the error object as its input parameter.

if ( navigator . geolocation ) { navigator . geolocation . getCurrentPosition ( showPosition , showError , optn ) ; } else { alert ( 'Geolocation is not supported in your browser' ) ; }

Success callback function

This callback function is invoked only when the user accepts to share the location information and the location data is successfully fetched by the browser. The location data will be available as a position object and the function will be called with the position object as its input parameter. A position object contains a timestamp property denoting the time at which the location data is retrieved and a coords object. The coords object has the following properties Latitude, longitude – Geographic coordinates in decimal degrees

– Geographic coordinates in decimal degrees Accuracy – Accuracy level of the latitude and longitude coordinates in meters. Bigger the number lesser is the accuracy

– Accuracy level of the latitude and longitude coordinates in meters. Bigger the number lesser is the accuracy Altitude – Height of the position above the sea level in meters

– Height of the position above the sea level in meters AltitudeAccuracy – Denotes how far off the altitude position could be from the actual attitude value obtained in meters. Bigger the number lesser is the accuracy

– Denotes how far off the altitude position could be from the actual attitude value obtained in meters. Bigger the number lesser is the accuracy Heading – Provides 360 degree heading information

– Provides 360 degree heading information Speed – Indicates relative speed in meters per second function showPosition ( position ) { document . write ( 'Latitude: ' + position . coords . latitude + 'Longitude: ' + position . coords . longitude ) ; } Error callback function

This is an optional callback function that takes a ‘Position Error’ object as its input parameter. This function is invoked under any one of the following circumstances Unknown Error occurred

Request timed out

User has denied to share the location information

Location information itself is unavailable function showError ( error ) { switch ( error . code ) { case error . PERMISSION_DENIED : alert ( "User denied the request for Geolocation." ) ; break ; case error . POSITION_UNAVAILABLE : alert ( "Location information is unavailable." ) ; break ; case error . TIMEOUT : alert ( "The request to get user location timed out." ) ; break ; case error . UNKNOWN_ERROR : alert ( "An unknown error occurred." ) ; break ; } } Position Options It describes the options to use while retrieving the user’s location. enableHighAccuracy: Boolean. If true, the user agent will try to provide the most accurate position. This can result in slower response time and higher power consumption. Is false, less accurate position will be obtained. Default value is false.

Boolean. If true, the user agent will try to provide the most accurate position. This can result in slower response time and higher power consumption. Is false, less accurate position will be obtained. Default value is false. Timeout: Positive long value. It denotes the maximum time (in milliseconds) that the user agent can take to respond with the location data. Default value is Infinity.

Positive long value. It denotes the maximum time (in milliseconds) that the user agent can take to respond with the location data. Default value is Infinity. maximumAge: Positive long value. It denotes how long (in milliseconds) the user agent can keep using the cached location data before trying to obtain new location data. A zero value indicates that the user agent must not use the cached location data and infinity value indicates that the cached location data must be used by the user agent. if ( navigator . geolocation ) { var optn = { enableHighAccuracy : true , timeout : Infinity , maximumAge : 0 } ; navigator . geolocation . getCurrentPosition ( showPosition , showError , optn ) ; } else { alert ( 'Geolocation is not supported in your browser' ) ; }

Track Location changes

The watchPosition() can be used to get the location data at regular intervals. The success callback function is invoked automatically as and when the device or the useragent position changes. The parameters to this function is similar to the getCurrentPosition() function. It returns a watch ID value which can be used to unregister the success callback function by passing it to the clearWatch() function.

function startWatch ( ) { if ( navigator . geolocation ) { var optn = { enableHighAccuracy : true , timeout : Infinity , maximumAge : 0 } ; watchId = navigator . geolocation . watchPosition ( showPosition , showError , optn ) ; } else { alert ( 'Geolocation is not supported in your browser' ) ; } } function stopWatch ( ) { . if ( watchId ) { navigator . geolocation . clearWatch ( watchId ) ; watchId = null ; } }

Show My Location on Google Maps

In order to plot your location on Google Maps we can make use of Google Maps API along with Geolocation API.