How to use HTML5 Geolocation API

#html #javascript

Geolocation API is used to retrieve the user's location. Since this can compromise privacy, the user first needs to click 'Allow' on the particular application to use their location.

Browser Support

The HTML5 Geolocation API is supported by most of today's moderns browsers. As of Chrome 50, the application needs to be hosted through HTTPS, if the URL is not secured the Geolocation API will not work.

How to use

Here is the list of what you need to do to use this API:
-Check if Geolocation API is supported in your browser
-If supported then run getCurrentPosition() method, if not show the message
-If the getCurrentPosition() is successful, it returns a coordinate object
-The showPosition() function outputs the Latitude and Longitude and calls showMap() with the parameters.

In the showMap() method we call function to show users position on the map, in our case we are using OpenStreetMap to make application what county am i in

You can use Google Maps instead. This is easy to use API to show the user's position, however, you can use some Back-End library if you run any Back-End code.

Check our tutorial on how to print HTML to PDF.

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE