HTML5 Geolocation (Geolocation)

HTML5 Geolocation (Geolocation) is used to determine the user's location.

Determine the user's location

HTML5 Geolocation API is used to obtain the user's geographical location.

Given that this feature may infringe on users' privacy, the user's geographical location information is not available unless the user consents.

Browser support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Chrome, Safari, and Opera support Geolocation (Geolocation).

Note:Geolocation (Geolocation) is more precise for devices with GPS, such as an iPhone.

HTML5 - Using Geolocation

Use the getCurrentPosition() method to get the user's position.

Here is a simple Geolocation instance that returns the user's longitude and latitude:

Instance

var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML="The browser does not support getting the location."; } } function showPosition(position) { x.innerHTML="Latitude:" + position.coords.latitude + "Longitude:" + position.coords.longitude; }

Try it »

Instance Explanation:

  • Detect whether Geolocation is supported
  • If supported, run the getCurrentPosition() method. If not supported, display a message to the user.
  • If getCurrentPosition() runs successfully, return a coordinates object to the function specified in the showPosition parameter.
  • The showPosition() function retrieves and displays the longitude and latitude.

The example above is a very basic Geolocation script without error handling.

Handle errors and rejections

The second parameter of the getCurrentPosition() method is used to handle errors. It specifies the function to run when the user's position cannot be obtained:

Instance

function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User refuses to provide the location request." break; case error.POSITION_UNAVAILABLE: x.innerHTML="The user's location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The location request times out." break; case error.UNKNOWN_ERROR: x.innerHTML="Unknown error." break; } }

Try it »

Error codes:

  • Permission denied - User does not allow Geolocation
  • Position unavailable - Unable to obtain the current position
  • Timeout - Operation times out

Display results on a map

To display results on a map, you need to access a map service that supports latitude and longitude, such as Google Maps or Baidu Maps:

Instance

function showPosition(position) { var latlon=position.coords.latitude+","+position.coords.longitude; var img_url="http://maps.googleapis.com/maps/api/staticmap?center=" +latlon+"&zoom=14&size=400x300&sensor=false"; document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>"; }

Try it »

In the example above, we use the returned latitude and longitude data to display the location on a Google map (using static images).

Google Maps script
The link above demonstrates how to use a script to display an interactive map with markers, zoom, and drag options.

Information about a given location

This page demonstrates how to display the user's location on a map. However, Geolocation is also useful for obtaining information about a given location.

It can be used for:

  • Updating local information
  • Displaying nearby points of interest
  • Interactive in-car navigation systems (GPS)

getCurrentPosition() Method - Returns data

If successful, the getCurrentPosition() method returns an object. It always returns the latitude, longitude, and accuracy attributes. If available, it also returns other attributes below.

Properties Description
coords.latitude Decimal latitude
coords.longitude Decimal longitude
coords.accuracy Position accuracy
coords.altitude Altitude, measured in meters above sea level
coords.altitudeAccuracy Altitude accuracy
coords.heading Direction, measured in degrees from north
coords.speed Speed, measured in meters per second
timestamp Response date/time

Geolocation Object - Other interesting methods

watchPosition() - Returns the user's current position and continues to return updated positions (like GPS in a car).

clearWatch() - Stops the watchPosition() method

The following example shows the watchPosition() method. You need a precise GPS device to test this example (such as an iPhone):

Instance

var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else { x.innerHTML="The browser does not support getting the location."; } } function showPosition(position) { x.innerHTML="Latitude:" + position.coords.latitude + "Longitude:" + position.coords.longitude; }

Try it »
Other Extensions