An Introduction To HTML5 GeoLocation
Posted By : Vijendra Kumar | 27-Dec-2017
The HTML geolocation feature allows your web application to get the geographic location of your site visitors. Geolocation is not part of the HTML5 specification, but since HTML5 has become a de facto markup for all the new features in HTML and JavaScript, I included the geolocation in this HTML5 tutorial.
Security and privacy
Users must accept their site through browser dialogs to access their location, so they can not use it to spy on their visitors without their knowledge.
Visit the location
The geolocation in the browser is accessed via JavaScript, through the navigator.geolocation object in the browser. Geo-location objects allow you to access geolocation via two main functions:
getCurrentPosition ()
watchPosition ()
The getCurrentPosition () function returns the visitor's location as a single snapshot. The watchPosition () function returns the visitor's location whenever the location changes. It does this by calling the success return or the error return function given whenever the location changes.
Both of these functions take the following parameters:
Correct callback function
Error callback function (optional)
Geo-location object (optional)
As you can see, some parameters are optional. Here's an example of accessing the user's geographic location, passing only the correct callback function to getCurrentPosition():
navigator.geolocation.getCurrentPosition (
Function {position}
Alarm ("Your location is:"
+ position.coords.latitude + ","
+ position.coords.longitude);
}
);
To test the example, click this button: Get the location
Geographic location is obtained asynchronously. This means that when you call getCurrentPosition () or watchPosition (), the function returns immediately. The correct callback function is called when the browser knows the user's location and the user accept the site to have access to the geographic location. If an error occurs, the error callback function is called.
Request for Proposal
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
Vijendra Kumar
Vijendra is a creative UI developer with experience and capabilities to build compelling UI designs for Web and Mobile Applications. Vijendra likes playing video games and soccer.