HTML5 Geolocation API

HTML5 Geolocation is an API Object that you can use to find current location/position of user. HTML5 Geolocation API is a beautiful feature of HTML5. You can use this API to display web page customized result based on user's location.

The Geolocation API lets you share your location with trusted web sites. Geolocation API comes with wide range of properties and methods that help you to get latitude and longitude in Javascript code.

Google map API can use these latitude and longitude and display popup message or display pin up on that particular location. In a nutshell, Geolocation allows you to give your current location information to the browser.

Syntax

var position = navigator.geolocation;
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;

Browser Support

Almost all latest browsers like Safari, Google Chrome, Mozilla Firefox, Opera, Internet Explorer 9.0 support many HTML5 features and functionalities. The good thing is that now many mobiles web browsers like iPhones, iPads, and Android phones all have excellent support for HTML5.

HTML5 Geolocation API Property

Properties	Type	Descriptions
coords	object	This object is intended to get latitude and longitude of current position.
coords.latitude	double	This property is intended to get latitude of current position.
coords.longitude	double	This property is intended to get longitude of current position.
coords.altitude	double	This property is intended to get altitude in meters from sea level.
coords.accuracy	double	This property is intended to get accurate position.
coords.altitudeAccuracy	double	This property is intended to get altitude accuracy of position.
coords.heading	double	This property is intended to get degrees clockwise from North.
coords.speed	double	This property is intended to get speed in meters per second.
timestamp	DOMTimeStamp	This property is intended to get response date/time.

HTML5 Geolocation API Methods

Methods	Descriptions
getCurrentPosition	This method is intended to get current position of device.
watchPosition	This method is intended to register a handler function and to get change position of the device.
clearWatch	This method is intended to unregister a handler function.

Example

<!DOCTYPE html>
<html>
  <head> <!-- www.techstrikers.com -->
    <title>Geolocation</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
var map;

function initialize() {
  var mapOptions = {
    zoom: 12
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
  // Try HTML5 geolocation
  if(navigator.geolocation) {
   
    navigator.geolocation.getCurrentPosition(function(position) {
        var latitude = position.coords.latitude;  
        var longitude = position.coords.longitude; 
      
      var pos = new google.maps.LatLng(latitude,longitude);

      var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Your current location using HTML5.'
      });

      map.setCenter(pos);
    }, function() {
      
    });
  } else {
    alert("Browser doesn't support Geolocation");
  }
}
google.maps.event.addDomListener(window, 'load', initialize);

</script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

See Live Example

HTML5 Geolocation API Error code

To handle error in HTML5 Geolocation, getCurrentPosition() method accepts second parameter as function to handle errors. This specified function runs if it fails to get the user's location.

Code	Constant	Descriptions
0	UNKNOWN_ERROR	Fails if any unknown error occure.
1	PERMISSION_DENIED	If denies you access to the location.
2	POSITION_UNAVAILABLE	If position are not detected.
3	TIMEOUT	Fails if gets position info in maximum time.

Example

navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);

    }, function() {
      ErrorOccure(error);
    });
  } else {
    // Browser doesn't support Geolocation
    ErrorOccure(error);
}

function ErrorOccure(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            alert("Permission Denied.");
            break;
        case error.POSITION_UNAVAILABLE:
            alert("Position Unavailable.")
            break;
        case error.TIMEOUT:
            alert("Timed Out.")
            break;
        case error.UNKNOWN_ERROR:
            alert("An unknown error occurred.")
            break;
    }
}

« Previous