How to Get User Location in Lightning Web Component in Salesforce?

In this article, we will create a Lightning Web Component (LWC) that retrieves and displays the user’s current location using the Geolocation API.

HTML

<template>
    <lightning-card title="Get User Location" icon-name="utility:location">
        <div class="slds-p-around_medium">
            <!-- Button to trigger location retrieval -->
            <lightning-button 
                label="Get Location" 
                onclick={handleGetLocation} 
                class="slds-m-bottom_medium">
            </lightning-button>
            
            <!-- Display latitude and longitude if the location is successfully retrieved -->
            <template if:true={locationAvailable}>
                <p>Latitude: {latitude}</p>
                <p>Longitude: {longitude}</p>
            </template>

            <!-- Display error message if there is an issue retrieving the location -->
            <template if:true={error}>
                <p class="slds-text-color_error">Error: {error}</p>
            </template>
        </div>
    </lightning-card>
</template>

JavaScript

import { LightningElement, track } from 'lwc';

export default class GetUserLocation extends LightningElement {
    @track latitude;           // Holds the latitude value of the user's location
    @track longitude;          // Holds the longitude value of the user's location
    @track locationAvailable = false;  // Flag to indicate if location data is available
    @track error;              // Holds error messages when location retrieval fails

    // This method is triggered when the user clicks the "Get Location" button
    handleGetLocation() {
        // Check if the browser supports geolocation
        if (navigator.geolocation) {
            // Attempt to get the user's current position
            navigator.geolocation.getCurrentPosition(
                (position) => {
                    // On success, store latitude and longitude, and set locationAvailable to true
                    this.latitude = position.coords.latitude;
                    this.longitude = position.coords.longitude;
                    this.locationAvailable = true;
                    this.error = undefined;  // Clear any previous error messages
                },
                (error) => {
                    // Handle errors and set an appropriate message
                    this.error = this.getErrorMessage(error.code);
                    this.locationAvailable = false;
                }
            );
        } else {
            // If geolocation is not supported, display an appropriate message
            this.error = 'Geolocation is not supported by this browser.';
        }
    }

    // Returns a user-friendly error message based on the error code
    getErrorMessage(errorCode) {
        switch (errorCode) {
            case 1:
                return 'Permission denied. Please enable location services.';
            case 2:
                return 'Position unavailable. Try again later.';
            case 3:
                return 'Timeout while retrieving location.';
            default:
                return 'An unknown error occurred.';
        }
    }
}

Key Features of the Component

Geolocation API Integration:
The navigator.geolocation API is used to retrieve the user’s latitude and longitude.

Error Handling:
The component handles different error scenarios, such as permission denial, unavailable position, and request timeout. The error messages are user-friendly and help guide users on what went wrong.

Conditional Rendering:
The template uses if:true directives to render either the location or the error message, ensuring the UI updates dynamically based on the state.

Conclusion

This component demonstrates how to build an interactive Lightning Web Component that leverages the Geolocation API for location-based features. It’s a great starting point for integrating geolocation into Salesforce applications. You can extend this by showing the location on a map or storing the data in Salesforce records.

We hope now you know how to get user location in lightning web component using Geolocation API.