With the emergence of smart mobile devices, there are many web applications that use the user's location to offer content according to the area, such as Twitter, Facebook and various Google services.
The Geolocation API in JavaScript
With geolocation we can know the user's geographical location, as long as the user's browser has this API implemented and the user gives us permission to access their location.
How do we use the geolocation object?
We can access the geolocation API through the navigator object in the following way:
navigator.geolocationWe must have two considerations before working with this API:
1
Check if the user's browser has this API implemented; and this is to avoid script execution errors; we will check it in the following way:
if(navigator.geolocation){
/* la geolocalizacion esta disponible */
}else{
/* la geolocalizacion no esta disponible */
}or an equivalent of it would be:
if ("geolocation" in navigator)
/* la geolocalizacion esta disponible */
}else{
/* la geolocalizacion no esta disponible */
}The user can deny or allow access to their location; Therefore, it is recommended that this functionality does not have to be mandatory for the user to use the application, only to improve the user's experience.
1 + 2
For both cases we must carry out the necessary validations to avoid problems in execution; To validate the second case (denial of the request by the user) we will see it later.
How to get user location with JavaScript navigation object?
We can access the user's location if and only if the user has allowed us access to their location and the browser supports this feature using the getCurrentPosition() method.
With the getCurrentPosition() method we can retrieve the user's current geographic location; The location is expressed in geographic coordinates returned in a Position object.
JavaScript getCurrentPosition() Method Syntax
getCurrentPosition(MostrarLocalizacion, ManejadorErrores, opciones);Parameters of the JavaScript getCurrentPosition() method
- ShowLocation: The method that will receive the user's location information; and this through a Position object.
- ErrorHandler: (optional) The method that will receive the PositionError object if an error occurs in the user's location.
The PositionError object can return:
- PositionError.PERMISSION_DENIED: The user did not allow the location.
- PositionError.POSITION_UNAVAILABLE: Unable to get the user's position.
- PositionError.TIMEOUT: The operation has timed out and cannot continue.
- options :(optional) Specifies a set of options to retrieve the data:
- frequency: How often we will retrieve the position of the given user in milliseconds (default 10000).
- enableHighAccuracy: This is a boolean indicating that the application will attempt to provide the most accurate location estimate possible.
By default it is false; It must be taken into account that if we activate this mode (true) it may increase the response time.
- timeout: The time that you will allow to pass in milliseconds for the geolocation.getCurrentPosition or geolocation.watchPosition method to give us a response; This time is given in milliseconds.
- maximumAge: Specifies the elapsed time in milliseconds for the cached location information.
Example 1: Basic Geolocation
To obtain the user's position using the JavaScript getCurrentPosition() method we can do the following:
As we can see, we first check if the geolocation API is available and then request the user's location with the getCurrentPosition() method; passing as a parameter the function that will receive the Position object called ShowLocation.
Example 2: Basic Geolocation and Error Handling
Now we will see a slightly more elaborate example; where we typify the errors that may occur, let's see:
Conclusion
With this article we can see one of the many functionalities that HTML5 provides us for the development of web applications to provide better experiences for the end user.
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter