HTML 5 Geolocation

HTML5 Geolocation is used to locate the user’s location.

Locate the user

HTML5 Geolocation API is used to obtain the user’s geographic location.

In view of this feature may infringe the user’s privacy, unless the user agrees, otherwise the user’s location information is not available.

HTML5-Use geolocation

Please use the getCurrentPosition() method to get the user’s position.

The following example is a simple geolocation example that returns the longitude and latitude of the user’s location:

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>
<p id="demo">Click the button to get your current coordinates (it may take a long time to get):</p>
<button onclick="getLocation()">Check</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
	if (navigator.geolocation)
	{
		navigator.geolocation.getCurrentPosition(showPosition);
	}
	else
	{
		x.innerHTML="This browser does not support obtaining geographic location.";
	}
}

function showPosition(position)
{
	x.innerHTML="latitude: " + position.coords.latitude + 
	"<br>longitude: " + position.coords.longitude;	
}
</script>
</body>
</html>

Example analysis:

  • Check whether geolocation is supported
  • If supported, run the getCurrentPosition() method. If it is not supported, a message is displayed to the user.
  • If getCurrentPosition() runs successfully, it returns a coordinates object to the function specified in the parameter showPosition
  • The showPosition() function obtains and displays the longitude and latitude

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

Handling errors and rejections

The second parameter of the getCurrentPosition() method is used to handle errors. It specifies the function to run when the user location fails:

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>
<p id="demo">Click the button to get your current coordinates (it may take a long time to get):</p>
<button onclick="getLocation()">Check</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
	if (navigator.geolocation)
	{
		navigator.geolocation.getCurrentPosition(showPosition,showError);
	}
	else
	{
		x.innerHTML="This browser does not support positioning.";
	}
}
function showPosition(position)
{
	x.innerHTML="latitude: " + position.coords.latitude + 
	"<br>longitude: " + position.coords.longitude;	
}
function showError(error)
{
	switch(error.code) 
	{
		case error.PERMISSION_DENIED:
			x.innerHTML="The user rejected the request to obtain the geographic location."
			break;
		case error.POSITION_UNAVAILABLE:
			x.innerHTML="Location information is not available."
			break;
		case error.TIMEOUT:
			x.innerHTML="Requested user geographic location timed out."
			break;
		case error.UNKNOWN_ERROR:
			x.innerHTML="unknown mistake."
			break;
	}
}
</script>
</body>
</html>

error code:

  • Permission denied-user is not allowed to geolocation
  • Position unavailable-The current position cannot be obtained
  • Timeout-Operation timeout

Show results on the map

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

Example


<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>
<p id="demo">Click the button to get your current coordinates (it may take a long time to get):</p>
<button onclick="getLocation()">Check</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation()
{
	if (navigator.geolocation)
	{
		navigator.geolocation.getCurrentPosition(showPosition,showError);
	}
	else
	{
		x.innerHTML="This browser does not support obtaining geographic location.";
	}
}

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+"'>";
}

function showError(error)
{
	switch(error.code) 
	{
		case error.PERMISSION_DENIED:
			x.innerHTML="The user rejected the request to obtain the geographic location."
			break;
		case error.POSITION_UNAVAILABLE:
			x.innerHTML="Location information is not available."
			break;
		case error.TIMEOUT:
			x.innerHTML="Requested user geographic location timed out."
			break;
		case error.UNKNOWN_ERROR:
			x.innerHTML="unknown mistake."
			break;
	}
}
</script>
</body>
</html>

In the above example, we use the returned latitude and longitude data to display the location in Google Maps (using a static image).

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

Information for a given location

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

Can be used as:

  • Update local information
  • Show points of interest around the user
  • Interactive car navigation system (GPS)

getCurrentPosition() method-return data

If T succeeds, the getCurrentPosition() method returns the object. The latitude, longitude, and accuracy properties are always returned. If available, the other attributes below will be returned.

Attributes
Description
coords.latitude

Latitude of decimal number

coords.longitude

The longitude of a decimal number

coords.accuracy

Position accuracy

coords.altitude

Altitude, measured in meters above sea level

coords.altitudeAccuracy

Altitude accuracy of location

coords.heading

Direction, measured in degrees from true north

coords.speed

Speed ​​in meters per second

timestamp

Date/time of response

Geolocation object-other interesting methods

watchPosition()-Returns the user’s current location, and continues to return the updated location when the user is moving (just like GPS in a car).

clearWatch()-stop watchPosition() method

The following example shows the watchPosition() method. You need an accurate GPS device to test this example (for example, iPhone):

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Novice Tutorial</title> 
</head>
<body>
<p id="demo">Click the button to get your current coordinates (it may take a long time to get):</p>
<button onclick="getLocation()">Check</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
	if (navigator.geolocation)
	{
		navigator.geolocation.watchPosition(showPosition);
	}
	else
	{
		x.innerHTML="This browser does not support obtaining geographic location.";
	}
}
function showPosition(position)
{
	x.innerHTML="latitude: " + position.coords.latitude + 
	"<br>longitude: " + position.coords.longitude;	
}
</script>
</body>
</html>