Get Current Location in LWC (Lightning Web Component)

In this implementation, we will implement the functionality to get the current location in LWC (Lightning Web Component) using getCurrentPosition()HTML Geolocation API. This will also help you to solve one of the problem statement in the Lightning Web Components Specialist Super-Badge. Let’s get into the implementation.

Implementation

In this implementation, we will create a button that will fetch the current location using HTML Geolocation API and show it on the UI in the Google Maps.

First, create a Lightning Web Component currentLocation. Add a button that will call the JS controller to get the location details. Add map using <lightning-map> with map-markers attribute to provide the location details like Latitude and Longitude.

currentLocation.html

<template>
    <lightning-card title="Get Current Location in Lightning Web Component">
        <div class="slds-p-around_small">
            <lightning-button variant="brand" 
                    label="Get Current Location"
                    onclick={handleClick}>
                </lightning-button> <br/><br/>
            <lightning-map map-markers={lstMarkers} zoom-level={zoomlevel} ></lightning-map>
        </div>
    </lightning-card>
</template>

Get Current Location in LWC

Then, in JS Controller, get the instance of geolocation using navigator.geolocation in a handleClick method. Call the getCurrentPosition() that will return the position. We can use this position to get the Latitude and Longitude like below:

// Get the Latitude and Longitude from Geolocation API
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;

Finally, set the lstMarkers using Latitute and Longitude of the location.

currentLocation.js

import { LightningElement } from 'lwc';

export default class CurrentLocation extends LightningElement {
    lstMarkers = [];
    zoomlevel = "1";

    handleClick(){
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(position => {

                // Get the Latitude and Longitude from Geolocation API
                var latitude = position.coords.latitude;
                var longitude = position.coords.longitude;
                
                // Add Latitude and Longitude to the markers list.
                this.lstMarkers = [{
                    location : {
                        Latitude: latitude,
                        Longitude : longitude
                    },
                    title : 'You are here'
                }];
                this.zoomlevel = "4";
            });
        }
    }
}

That is all. This is how you can get the current location using LWC (Lightning Web Component) using getCurrentPosition() HTML Geolocation API.

If you don’t want to miss new implementations, please Subscribe here. If you want to check more implementations using Lightning Web Component, you can check it here.

You can learn more about HTML Geolocation API here.

See you in the next implementation!