Get Current Latitude And Longitude Using Geolocation

Get Current Latitude and Longitude Using HTML5 Geolocation API

Sometimes web applications need to know a user's current location to provide better services. Whether you're building a food delivery app, weather application, ride booking system, nearby store finder, or attendance system, getting the user's latitude and longitude can be extremely useful.

HTML5 provides a built-in Geolocation API that allows websites to request the user's current location after receiving their permission. The browser retrieves the device's GPS coordinates (or network location) and returns the latitude and longitude, making location-based features easy to implement without any external library.

What is Geolocation?

Geolocation is the process of identifying the physical location of a device connected to the internet. Modern browsers support the HTML5 Geolocation API, which can determine a user's location using GPS, Wi-Fi networks, mobile towers, or IP-based positioning.

Before sharing the location, every browser asks the user for permission. If the user allows access, the browser returns the geographical coordinates that can be used in your application.

Common Use Cases

• Display nearby restaurants or stores
• Show local weather information
• Location-based attendance systems
• Ride booking applications
• Delivery tracking
• Maps and navigation
• Location-aware search results

How the Geolocation API Works

JavaScript provides the navigator.geolocation.getCurrentPosition() method to retrieve the user's current coordinates. The browser first asks for permission. If access is granted, it returns an object containing latitude, longitude, accuracy, altitude, speed, and other location-related information.

Step 1: Create the HTML

Add a button that will request the user's current location and a paragraph to display the latitude and longitude.

<button onclick="getLocation()">Get Coordinates</button>

<p id="demo"></p>

Step 2: JavaScript Code

Now create the JavaScript function that checks whether the browser supports the Geolocation API and then requests the current position.

var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {

    var coordinates = "Latitude - " +
        position.coords.latitude +
        " & Longitude - " +
        position.coords.longitude;

    document.getElementById("demo").innerHTML = coordinates;
}

Output

Click the "Get Coordinates" button. Your browser will ask for location permission. After allowing access, the current latitude and longitude will be displayed on the page.

Understanding the Code

• navigator.geolocation checks whether the browser supports the Geolocation API.
• getCurrentPosition() requests the user's current location.
• showPosition() is executed after the location is successfully retrieved.
• position.coords.latitude returns the latitude.
• position.coords.longitude returns the longitude.

Important Notes

• The user must allow location permission.
• Most modern browsers require HTTPS to access the Geolocation API.
• The API may not work correctly in private browsing mode depending on browser settings.
• Always handle permission denial gracefully in production applications.

Browser Support

The HTML5 Geolocation API is supported by all major browsers including Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, and Opera. For the best experience, serve your website over HTTPS.

Conclusion

Using the HTML5 Geolocation API is one of the simplest ways to obtain a user's current latitude and longitude. With only a few lines of JavaScript, you can build powerful location-aware applications such as delivery platforms, weather apps, travel websites, maps, and nearby search features.

You can further enhance this example by displaying the location on Google Maps, reverse geocoding the coordinates into an address, or sending the location to your backend server for additional processing.

Watch Video Tutorial

Prefer learning by watching? Follow the complete step-by-step implementation in this YouTube tutorial:

Get Current Latitude and Longitude Using HTML5 Geolocation API