Up till now, we had seen many features getting designed using HTML. One of the latest and advanced features included in HTML is geolocation. HTML geolocation is most useful for detecting user location on a map. So this feature gets designed in HTML to identify the exact position of the user on the map. This position of the user can be identified by using attributes called latitude and longitude of specific user position. This can retrieve information only when the user allows it to access the location. This HTML feature mostly used for local business purpose, for finding restaurants, or choosing the location on the map.
Here is the syntax for HTML geolocation is as follows: One can use location API, which will use global navigator object, which is as shown below:
var locat = navigator.geolocation;
Into the above syntax navigator. Geolocation responsible for the user browser to get access to their location information; one access is defined. The browser can provide the best functionality that is present over there on the device, so one can easily access this data.
This data can be accessed efficiently by using different ways like getCurrentPosition to know the current position of user or device, watchPosition, which is helpful whenever the position of the device is getting changed and one more way like clearWatch, which helps to clear all calls in geolocation functionality.
This functionality works on some interfaces those are as follows:
There are total 3 methods used in HTML geolocation for defining position with geolocation interface; those are as follows:
Here are the Examples of HTML Geolocation
In the first example, we are going to see whether our browser will support or not for this geolocation feature; here is the code for it as mentioned below:
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Geolocation</title>
</head>
<body>
<h4>HTML Geolocation</h4>
<button onclick="getlocation()">Click Here</button>
<br>
<br>
<br>
<p>As we all know, geolocation is the feature used for positioning the exact location of the user or device. But the first step we have to check whether our browser is going to support this geolocation feature or not. </p>
<h4> This Example illustrates whether our browser is going to support for geolocation or not.</h4>
<div id="geolocation1"></div>
<script>
var x= document.getElementById("geolocation1");
function getlocation() {
if(navigator.geolocation){
alert("My browser is going to support Geolocation feature")
}
else
{
alert("Oops! My browser is not going to support Geolocation feature")
}
}
</script>
</body>
</html>Output:
In this example, we are going to show the exact location with the HTML geolocation feature, so it will show the exact position on the map with attribute value for latitude and longitude is as follows:
HTML code:
<!DOCTYPE html>
<html>
<body>
<h4>HTML Geolocation Latitude and Longitude Value</h4>
<p>Example showing Geolocation , It will give values for the latitude and longitude after clicking below button</p>
<button onclick="getLocation()">Click Here</button>
<p id="geolocation"></p>
<script>
var x = document.getElementById("geolocation");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showgeolocPosition);
} else {
x.innerHTML = "This code is not supported in geolocation for your browser";
}
}
function showgeolocPosition(position) {
x.innerHTML = "Latitude Attribute Value: " + position.coords.latitude +
"<br>Longitude Attribute Value: " + position.coords.longitude;
}
</script>
</body>
</html>Output:
After clicking on the button, the output will be as shown below
In this example, we are going to show the exact location with the HTML geolocation feature, so it will show the exact position on the map with attribute value for latitude and longitude is as follows:
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
</head>
<style>
#mapdemo{
width: 500px;
height: 500px;
margin-left: 200px;
}
</style>
<body>
<h2>Find Your Location on Google Map</h2>
<p>In this Example we are going to see exact location on Google map, where actually we are.</p>
<button onclick="getlocation();"> Show my position on Map </button>
<div id="mapdemo">
</div>
<script src="https://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function getlocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPos, showErr);
}
else{
alert("Sorry! your Browser does not support Geolocation API")
}
}
// Current Poistion on Google Map
function showPos(position){
latt = position.coords.latitude;
long = position.coords.longitude;
var lattlong = new google.maps.LatLng(latt, long);
var myOptions = {
center: lattlong,
zoom: 15,
mapTypeControl: true,
navigationControlOptions: {style:google.maps.NavigationControlStyle.SMALL}
}
var maps = new google.maps.Map(document.getElementById("mapdemo"), myOptions);
var markers =
new google.maps.Marker({position:lattlong, map:maps, title:"Your position on map!"});
}
function showErr(error) {
switch(error.code){
case error.PERMISSION_DENIED:
alert("User or Device not allow to accept your request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
alert("USer or Device exact location information is currently unavailable.");
break;
case error.TIMEOUT:
alert("Requested request is getting time out .");
break;
case error.UNKNOWN_ERROR:
alert("Something unknown error is accrued.");
break;
}
} </script>
</body>
</html>Output:
上記のすべての情報から、HTML 地理位置情報は、地図上でデバイスまたはユーザーの位置を識別するために使用される機能であることがわかりました。
緯度と経度の属性を使用して、ユーザーの正確な位置を特定します。
この機能は、getCurrentPosition、watchPosition、clearWatch などのさまざまなメソッドで動作します。
The above is the detailed content of HTML Geolocation. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
