HTML Geolocation (original) (raw)

Last Updated : 11 Jul, 2025

**The HTML Geolocation is used to get the geographical position of a user. Due to privacy concerns, this position requires user approval. Geo-location in HTML5 is used to share the location with some websites and be aware of the exact location. It is mainly used for local businesses, and restaurants, or showing locations on the map. It uses JavaScript to give latitude and longitude to the backend server.

Most browsers support Geolocation API. Geo-location API uses a global navigator object. In this article, we will know **HTML Geolocation, various properties, methods & their implementation through examples.

**Syntax:

var loc = navigator.geolocation

**Location Properties:

The following table determines properties used in getCurrentPosition() and their returning values.

**Geolocation Methods:

The Geolocation has following methods which make it interesting and easier to work.

**Example: This example explains returning the user's current location using the getCurrentPosition() method.

var loc = navigator.geolocation; function getLoc() { loc.getCurrentPosition(showLoc, errHand); }

The above function can also be written without creating a navigator object as shown below:

function getlocation() { navigator.geolocation.getCurrentPosition(showLoc, errHand); }

**Example: In this example, we simply display the current location with the help of latitude and longitude via HTML Geolocation.

HTML `

Displaying location using Latitude and Longitude

<button class="geeks" onclick="getlocation()">
    Click Me
</button>
<p id="demo1"></p>

<script>
    let variable1 = document.getElementById("demo1");
    function getlocation() {
        navigator.geolocation.getCurrentPosition(showLoc);
    }
    function showLoc(pos) {
        variable1.innerHTML =
            "Latitude: " +
            pos.coords.latitude +
            "<br>Longitude: " +
            pos.coords.longitude;
    }
</script>

`

**Output:

Getting the current location using latitude and longitude

**Error and Rejection Handling:

It is very important to handle the errors generated in Geolocation and show a required message when an error occurs. Functions like getCurrentPosition() make use of an error handler to handle the error generated (function errHand as used in the above example). The PositionError object used by the error handler has two properties that let the function handle error efficiently.

• Code
• Message

**Generated errors in geolocation:

**Example: In this example we will see the implementation of geo location in HTML document.

HTML `