Hello All,

getting the following error while working on "Build an Account Geolocation App:Using Events to Add Markers to the Map"

Something has gone wrong. Action failed: sty$AccountMap$controller$accountsLoaded [TypeError: Cannot read property 'lat' of null] Failing descriptor: {sty$AccountMap$controller$accountsLoaded}. Please try again.

sty is the namespace currently used. The error is happening only after doing the steps mentioned in the "Using Events to Add Markers to the Map".Code works till the module:"Creating the AccountMap Component". something is missing like setting latlng in such a way that the js file works or the AccountMapController.js. please find the code below from trailhead:
 AccountMap.cmp

<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.js
({
    jsLoaded: function(component, event, helper) {

        setTimeout(function() {
            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);
        }  
    }
})

AccountListController.js

({
    doInit : function(component, event) {
        var action = component.get("c.findAll");
        action.setCallback(this, function(a) {
            component.set("v.accounts", a.getReturnValue());
            var event = $A.get("e.sty:AccountsLoaded");
            event.setParams({"accounts": a.getReturnValue()});
            event.fire();
        });
    $A.enqueueAction(action);
    }
})

AccountList.cmp

<aura:component controller="AccountController">
<aura:registerEvent name="accountsLoaded" type="c:AccountsLoaded"/>
    <aura:attribute name="accounts" type="Account[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <ul>
    <aura:iteration items="{!v.accounts}" var="account">
        <c:AccountListItem account="{!account}"/>
    </aura:iteration>
    </ul>

</aura:component>

AccountLocator.cmp

<aura:component implements="force:appHostable">

    <div>
        <div>
            <c:AccountMap />
        </div>

        <div>
            <c:AccountList />
        </div>
    </div>

</aura:component>

AccountsLoaded.evt

<aura:event type="APPLICATION">
    <aura:attribute name="accounts" Type="Account[]"/>
</aura:event>

AccountController.apxc

public with sharing class AccountController {

    @AuraEnabled
    public static List<Account> findAll() {
    return [SELECT id, name, Location__Latitude__s, Location__Longitude__s
            FROM Account
            WHERE Location__Latitude__s != NULL AND Location__Longitude__s != NULL
            LIMIT 50];
    }

}

AccountListItem.cmp

<aura:component>

    <aura:attribute name="account" type="Account"/>

    <li><a>{!v.account.Name}</a></li>

</aura:component>

Please suggest and it would greatly help me to move forward with Trailheading :) 


Regards
Siva