How to get GeoLocation in a lightning component?

Question

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 Logic:

({

    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.

Thanks in advance.

Answer 1

Just a thought. There are many services (like http://ip-api.com) available from where you can get the geolocation by calling their APIs.

You can try to call this api via javascript at front end and pass the geolocation to the controller. The JavaScript is as below. Also, I have tested it in JsFiddle (http://jsfiddle.net/5zokh6zx/) and it is giving a proper result. Hope this helps.

function myGeoLocation() {
    if (window.XMLHttpRequest) xmlhttp = new XMLHttpRequest();
    else xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.open("GET","http://ip-api.com/json",false);
    xmlhttp.send();

    var obj = JSON.parse(xmlhttp.responseText);

    return obj;
}

Answer 2

I think you want to use geolocation, not geoLocation.

You get the error because you test if it's null but then use it anyway. You should probably move the call to getCurrentPosition to be inside the success part of the if().

edit: oops.. i'm several years late to this party.. hope you got it sorted before this.

Answer 3

I tried run you code and i see the error.

please use the code below:

<aura:attribute name="latitude" type="decimal" default=""/>
<aura:attribute name="longitude" type="decimal" default=""/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" /> 

doInit : function(component, event, helper) {
        if(navigator.geoLocation){
            console.log("capability is there");
        }else{
            console.log("No Capability");
        }
        navigator.geolocation.getCurrentPosition(function(position) {
            var latit = position.coords.latitude;
            var longit = position.coords.longitude;
            component.set("v.latitude",latit);
            component.set("v.longitude",longit);
            console.log("The Latitude is:"+ latit);
            console.log("The Latitude is:" +longit);            
        });        
    }

the see de debug in the console log.

See you there!!!