Geolocator.js is a utility for getting geo-location information, geocoding, address look-ups, distance & durations, timezone information and more. In this article, we will make use of the Geolocation API to get the geographical position of the user. Geo-location is accurate for devices with GPS (Global Positioning System).
Geolocation is also very useful for:
- Up-to-date local information
- To Guide the user to the destination
- (GPS)
Requirements
1.Text editor
2.Browser support
3.Since Geo-location API is an HTML5 feature, make sure your doctype is HTML5.
The list of browsers given below fully support the Geolocation:
1.Google Chrome
2.Internet Explorer / Edge
3.Mozilla Firefox
4.Safari
6.Opera
Step 1: – Open up the text editor, create a file and name it as “geolocation.html”
Step 2: – Now add the following code into it.
Coding
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
</head>
<body>
<button onclick="getLocation()">Get Coords</button>
<h1 id="coords"></h1>
<script>
var x = document.getElementById('coords');
function getLocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported";
}
function showPosition(position){
//console.log(position.coords.latitude);
x.innerHTML = "Latitude: "+ position.coords.latitude + "<br>Longitude: "+ position.coords.longitude;
}
}
</script>
</body>
</html>
Step 3: – Save the file and open it using your browser.
Step 4: – Click the Get Coords button to get the user coordinates. Since this API compromise user’s privacy, the position will not be available unless the user approves it.
Step 5: – Click the “Allow” button, to get the user coordinates as shown.
Important Note
Make sure you’re calling Geolocation APIs (such as geolocator.locate() and geolocator.watch()) from a secure origin (i.e. an HTTPS page). In Chrome 50, Geolocation API is removed from unsecured origins. Other browsers are expected to follow.
About the Author
This blog having the details of Processes running. The way of running is explained clearly. The content quality is really great. The full document is entirely amazing. Thank you very much for this blog.
This idea is mind blowing. I think everyone should know such information like you have described on this post. Thank you for sharing this explanation.Your final conclusion was good. We are sowing seeds and need to be patiently wait till it blossoms.