Get Live Location in Salesforce Using LWC
In modern applications, accessing the user’s live location enhances personalization, user experience, and functionality—especially in logistics, delivery tracking, and field service apps. In this blog, we will learn how to get the user’s live geolocation using JavaScript in LWC and store it in Salesforce if needed.
Use Case
We want to:
- Get the user’s latitude and longitude when a button is clicked.
- Display the location on screen.
- Optionally, store the location in Salesforce (e.g., in a custom object like Location__c).
Technologies Used
- Salesforce Lightning Web Components (LWC)
- Geolocation API (Native JavaScript)
- Apex (optional: to store the data in Salesforce)
Step-by-Step Implementation
1. Create Custom Object (Optional – for storing location)
If you want to store location in Salesforce:
Object Name: Location__c
Fields:
- Latitude__c (Number 16,6)
- Longitude__c (Number 16,6)
- Captured_Time__c (DateTime)
2. Create LWC Component – getLocation
Html:
<template>
<lightning-card title=”Get Live Location” icon-name=”utility:location”>
<div class=”slds-p-around_medium”>
<lightning-button label=”Get My Location” onclick={getLocation}></lightning-button>
<template if:true={latitude}>
<p><strong>Latitude:</strong> {latitude}</p>
<p><strong>Longitude:</strong> {longitude}</p>
</template>
<template if:true={error}>
<p class=”slds-text-color_error”>{error}</p>
</template>
</div>
</lightning-card>
</template>
Javascript:
import { LightningElement, track } from ‘lwc’;
import saveLocation from ‘@salesforce/apex/LocationController.saveLocation’; // optional
export default class GetLocation extends LightningElement {
@track latitude;
@track longitude;
@track error;
getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
this.error = null;
// Optional: Save to Salesforce
saveLocation({
lat: this.latitude,
lon: this.longitude
}).then(() => {
console.log(‘Location saved’);
}).catch((err) => {
this.error = ‘Error saving location: ‘ + err.body.message;
});
},
(error) => {
this.error = ‘Error getting location: ‘ + error.message;
}
);
} else {
this.error = ‘Geolocation is not supported by this browser.’;
}
}
}
3 Apex Controller (optional)
Apex:
public with sharing class LocationController {
@AuraEnabled
public static void saveLocation(Decimal lat, Decimal lon) {
Location__c loc = new Location__c();
loc.Latitude__c = lat;
loc.Longitude__c = lon;
loc.Captured_Time__c = System.now();
insert loc;
}
}
Security Notes
- Make sure the Apex class is marked as @AuraEnabled and with sharing.
- Add FLS and CRUD checks for production use.
- Add your LWC component to a Lightning App Page, Record Page, or Home Page.
Output
When a user clicks “Get My Location”, their live geolocation is fetched using the browser’s geolocation API, displayed on the screen, and optionally stored in Salesforce for records.
Conclusion
With just a few lines of JavaScript and optional Apex, you can easily integrate live geolocation tracking in Salesforce using Lightning Web Components. This feature is especially useful in logistics, delivery tracking, or mobile Salesforce apps.