function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Salesforce Developer 109Salesforce Developer 109 

How to get GeoLocation in a lightning component?

i am trying to build a lightning component that shows nearby contacts based on the users current location. i am getting an error when trying to access the users current location through navigator.geoLocation. I get the following error.
"Uncaught error in actionCallback : navigator.geoLocation is undefined"

Here is my component and its controller logic.

Component: 
<aura:component >
    
   <aura:attribute name="latitude" type="Decimal"/>
    <aura:attribute name="longitude" type="Decimal"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
  
</aura:component>
Controller: 
({
	doInit : function(component, event, helper) {
        if(navigator.geoLocation){
            console.log("capability is there");
            
        }else{
            console.log("No Capability");
        }
        navigator.geoLocation.getCurrentPosition(function(position){
            this.latitude=component.set("v.latitude",position.coords.latitude);
            this.longitude=component.set("v.longitude", position.coords.longitude);
            console.log("Latitude is:"+this.latitude);
            console.log("Longitude is:" +this.longitude);
        });
		
	}
})
debugging  console log shows that my else part is only written to console. does that mean that geolocation is not supported in lightning? Am i doing anything wrong ? Any help would be appreciated.
 
Pradeep BandarpalliPradeep Bandarpalli
You will be probably getting "v.latitude and "v.longitude" as nulls. As soon as the component initializes server calls navigator.geolocation function, this function being asynchronous executes with delay. I have tried in the below way, its working for me.

if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var latit = position.coords.latitude;
                    var longit = position.coords.longitude;
                    component.set("v.latit",latit);
                    component.set("v.longit",longit);
});
}
Nicolas VuillamyNicolas Vuillamy
Not working anymore with lockerservice activated :/
Rick UptonRick Upton
The blog post Lightning Component on GeoLocation (https://icodecloud.blogspot.com/2016/08/lightning-component-on-geolocation.html) has a link to deploy code which contains an example of getting and using the user's browser location. After deploying the code, I updated the first line of GeoLocationComp.cmp to have the following line: 
<aura:component controller="AccountsData" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
By adding the line above, I was then able to see the custom component in the list of custom components in the Lightning Community Builder and add the component to a community page. I published and tested the page and found that the component worked as expected by showing me a pin on a map for the account closest to my browser's location.
Gatorrr7Gatorrr7
Just make sure you are not initialising a variable inside the callback method. The below code works for me. 
getNearByContacts : function(component, event, helper) {
        var latitude;
        var longitude;
        navigator.geolocation.getCurrentPosition(function(e) {
            console.log(e.coords.latitude + ', ' + e.coords.longitude);
            latitude = e.coords.latitude;
            longitude = e.coords.longitude;
            component.set("v.latitude",latitude);
            component.set("v.longitude",longitude);
        }, function() {
            console.log('There was an error.');
        },{maximumAge:600000});
}