+ Start a Discussion
Vigneshwaran LoganathanVigneshwaran Loganathan 

AccountMap$controller$accountsLoaded [Cannot read property 'lat' of null]

Hi All, I am facing the above error while doing a module from Trailhead, can anyone help? what does the error mean?

AccountMap
<aura:component>
    <aura:attribute name="map" type="Object"/>
    <aura:handler event="c:AccountsLoaded" action="{!c.accountsLoaded}"/>
    <ltng:require styles="/resource/leaflet/leaflet.css"
        scripts="/resource/leaflet/leaflet.js"
        afterScriptsLoaded="{!c.jsLoaded}" />
    <div id="map"></div>
</aura:component>


AccountMapController
accountsLoaded: function(component, event, helper) {
        // Add markers
        var map = component.get('v.map');
        var accounts = event.getParam('accounts');
        for (var i=0; i<accounts.length; i++) {
            var account = accounts[i];
           
            var latLng = [account.Location__Latitude__s, account.Location__Longitude__s];
            L.marker(latLng, {account: account}).addTo(map);
        }

AccountsLoaded.evt
<aura:event type="APPLICATION">
    <aura:attribute name="accounts" Type="Account[]"/>
</aura:event>
Thanks for the help
Vignesh
 
Naveen KNNaveen KN
Hi Vignesh, could you please share the link of the module you are trying. 

Naveen
Raj VakatiRaj Vakati
Refer this link for source code 

https://github.com/batherto/salesforce-geolocation/tree/2824453c785e4b367de80cb301fb680c92907fc3/force-app/main/default/aura
 
<aura:component>
    <aura:attribute name="map" type="Object"/>
    <aura:handler event="c:AccountsLoaded" action="{!c.accountsLoaded}"/>
    <ltng:require styles="/resource/leaflet/leaflet.css"
        scripts="/resource/leaflet/leaflet.js"
        afterScriptsLoaded="{!c.jsLoaded}" />
    <div id="map"></div>
</aura:component>
 
({
    jsLoaded: function(component, event, helper) {
        var map = L.map('map', {zoomControl: false}).setView([37.784173, -122.401557], 14);
        L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
             {
                 attribution: 'Tiles © Esri'
             }).addTo(map);
        component.set("v.map", map);
    },
    accountsLoaded: function(component, event, helper) {
        // Add markers
        var map = component.get('v.map');
        var accounts = event.getParam('accounts');
        for (var i=0; i<accounts.length; i++) {
            var account = accounts[i];
            var latLng = [account.Location__Latitude__s, account.Location__Longitude__s];
            L.marker(latLng, {account: account}).addTo(map);
        }  
    }
})