This post is about to teach you how to get the latitude and longitude of the current location!. Its pretty simple in HTML 5. You actually don’t need any 3rd party API’s to get the current location instead you are going to use Web API.
HTML 5 got some amazing stuffs and can be get it done using JavaScript along with that.
But, this script will work only in modern Browsers, don’t expect to work in old browsers, that’s a waste of time.
And one more thing, keep in mind!. This script needs a Server to Run!!. Any servers IIS or Apache etc.,
getCurrentPosition is the method that we are going to use in our JavaScript
Syntax
navigator.geolocation.getCurrentPosition(success, error, options)
Three parameters:
success, error, options – where success is the mandatory parameter here, the other two are optional.
I don’t want to bore you explaining what are these parameters do!!.
If you wish to read about those you can go to the mozilla developer website and check it out:
https://developer.mozilla.org/en-US/docs/Web/API/window.navigator.geolocation.getCurrentPosition#PositionError
Lets start the coding part:
This script tells you whether geolocation is supported in the browser or not:
if(!navigator.geolocation){
alert('Your Browser does not support HTML5 Geo Location. Please Use Newer Version Browsers');
}
And here is the JavaScript part which will get you the Latitude and Longitude:
navigator.geolocation.getCurrentPosition(success, error);
function success(position){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
document.getElementById("lat").value = latitude;
document.getElementById("lng").value = longitude;
document.getElementById("acc").value = accuracy;
}
function error(err){
alert('ERROR(' + err.code + '): ' + err.message);
}
In the above code: position is the Object and coords, latitude, longitude, accuracy are the properties.
And here is your expected part, the Entire code to test it yourself 🙂
NOTE: When you run this code, Your browser will ask you whether to Allow this script to get the current location or not. Please click ‘Allow’ to Run this script!
<!DOCTYPE html>
<head>
<title>Get Current Position - Latitude & Longitude using HTML 5</title>
<script>
if(!navigator.geolocation){
alert('Your Browser does not support HTML5 Geo Location. Please Use Newer Version Browsers');
}
navigator.geolocation.getCurrentPosition(success, error);
function success(position){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
document.getElementById("lat").value = latitude;
document.getElementById("lng").value = longitude;
document.getElementById("acc").value = accuracy;
}
function error(err){
alert('ERROR(' + err.code + '): ' + err.message);
}
</script>
<body>
Latitude: <input type="text" id="lat" /><br />
Longitude: <input type="text" id="lng" /><br />
More or Less <input type="text" id="acc" /> Meters.
</body>
</html>
Moreover here is the demo link:
how to store these values in database from php