Best practice how to use HTML5 Geolocation API
In this post, we will in steps show you how you can easily use HTML5 Geolocation API and implement it on your website or APP.
We will describe what is it and how this works in depth.
We can not imagine having websites with no map on it right? Especially when we go to see the location of some business. When we land on most of the websites in some case they want to know our location. This can be from many factors. They can choose which promotions or offers they want to show based on our location or so on.
This can be done on the server side, without permission of the user, but if we want to get users location with permission we can use the HTML5 Geolocation API.
What is HTML5 Geolocation API?
HTML5 Geolocation API allows us to find the users location with his permission. When we find the coordinates we can show that on the map. If the user does not allow we the API will not provide coordinates.
Follow this tutorial and learn how we made this awesome tool which can locate where you are
This API is compatible with modern browsers, check the picture below for more information about browser versions.
First, think when you are using this API is to check if the user's browser supports it. You can do it with the following code, where if the API can not work users get some message, you can check that logic, you can put some alert or modal dialog. If the API is supported the code will go in the next function where we will get the coordinates.
The next step is to get the users position. We can do that with getCurrentPosition() function from navigator.geolocation object. This function accepts three parameters, success function, error handler, and position options.
In this step, we will cover only the first parameter, which means success callback function. In our case this function is showPosition(). For more details see the code below which is same with first picture.
Success callback function
This function will be called only if the user accepts to share his position and the browser successfully read users coordinates. In all other cases, this function will be not called.In the callback function, we will use coords from which we will get latitude and longitude, see the code below.
With this function, we are writing latitude and longitude in some div, which will provide numbers to the visitor and also with the same coordinates we are calling showMap() function which will take care of showing users position on the map.
Show user on the map
The major part is showing users on the map, even if we append coordinates in the div in the previous function, the best practice is to show the user on the map. The function below is taking care of it.
Let me explain to you what this code is doing. First, we all colling convertDMS() function which accepts two parameters, latitude and longitude.
After that, we are declaring our map with coordinates and zoom level. We are adding the title layer and for last we are adding a marker to our map using the same coordinates.
As a conclusion, we can mention that HTML5 Geolocation API is free and easy to use. This API helps us to locate users position if the user approves that. When we get the coordinates we can do a number of tricks to provide users with some interesting information. We can use a mix of external API's which will give us information about the place and so on.