An Overview of HTML Geolocation
Posted By : Sachin Arora | 17-Dec-2017
Html Geolocation- Geolocation is the estimation and identification of real-world geographic location of an object. Geolocation involves the generation of geographic co-ordinates,so html provides us an API to fetch the users location. Geolocation appears to be most accurate with the devices having GPS.
Using Html Geolocation
It provides us a method getCurrentPosition() which is used to return the user's position . It gives the latitude and longitude position of the user which then is used to identify the geographic location on the map.
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"
Longitude: " + position.coords.longitude;
}
above example shows how the getCurrentPosition() returns the latlong position of the user.
Displaying The Result In Map
To show the above result in map,we need to access the map services like google maps. The above returned latitude and longitude are provided to the method showPosition() as parameters to display it on the map.
Example:-
function showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;
var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
"+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_:KEY";
document.getElementById("mapholder").innerHTML = "
";
}
So, the above examples shows that how to get the users location on map using html Geolocaton api.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Sachin Arora
Sachin is ambitious and hardworking individual with broad skills,He have the capabilities to build captivating UI applications . One of his key strength is building a strong bond with the team in order to deliver the best results on time .