Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Amy S. OplingerAmy S. Oplinger 

Trailhead Account Geolocation Project error

I am on the last step of the Trailhead Account Geolocation project and I get the following error:
User-added image

Here is the code from the AccountMapController-- What did I do wrong?
({
      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).on('click', function(event) {
   helper.navigateToDetailsView(event.target.options.account.Id);
});

      accountSelected: function(component, event, helper) {
         // Center the map on the account selected in the list
         var map = component.get('v.map');
         var account = event.getParam("account");
         map.panTo([account.Location__Latitude__s, account.Location__Longitude__s]);
      }
})
Best Answer chosen by Amy S. Oplinger
Jeff DouglasJeff Douglas
It doesn't looks like you may have forgotten some brackets or commas. Try pasting this in. I fixed a few things for you.
  
({
    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).on('click', function(event) {
                helper.navigateToDetailsView(event.target.options.account.Id);
            });

        }
    },
    
    accountSelected: function(component, event, helper) {
        // Center the map on the account selected in the list
        var map = component.get('v.map');
        var account = event.getParam("account");
        map.panTo([account.Location__Latitude__s, account.Location__Longitude__s]);
    }
    
})

Jeff Douglas
Trailhead Developer Advocate

All Answers

Jeff DouglasJeff Douglas
It doesn't looks like you may have forgotten some brackets or commas. Try pasting this in. I fixed a few things for you.
  
({
    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).on('click', function(event) {
                helper.navigateToDetailsView(event.target.options.account.Id);
            });

        }
    },
    
    accountSelected: function(component, event, helper) {
        // Center the map on the account selected in the list
        var map = component.get('v.map');
        var account = event.getParam("account");
        map.panTo([account.Location__Latitude__s, account.Location__Longitude__s]);
    }
    
})

Jeff Douglas
Trailhead Developer Advocate
This was selected as the best answer
Amy S. OplingerAmy S. Oplinger
Thank you! That worked...badge achieved!!
Mayank Srivastava 28Mayank Srivastava 28

I drop in and it's already solved!
Amy, shouldn't it be Jeff's answer as the Best Answer ;)
Amy S. OplingerAmy S. Oplinger
LOL...thanks, Mayank! I have other problems and will continue to have problems that you can solve...dont you worry!! :)
Mayank Srivastava 28Mayank Srivastava 28
Haha. Sure, would love to help :)
Stuart Edeal.Stuart Edeal.
Another question - I got this far, but when I hit the Verify button, I got the following error.
"AccountList's JS controller does not get a reference to the 'AccountsLoaded' event "

my AccountListController.js looks like this 
({ 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.c:AccountsLoaded"); event.setParams({"accounts": a.getReturnValue()}); event.fire(); }); $A.enqueueAction(action); } })

	//Fetch the expense list from the Apex controller   
      helper.getAccountList(component);
   },
   showDetails: function(component, event, helper) {
        //Get data via "data-data" attribute from button (button itself or icon's parentNode)
        var id = event.target.getAttribute("data-data") || event.target.parentNode.getAttribute("data-data")
        alert(id + " was passed");
   }
})

 
bovisbovis
Following up on Stuart question from Feb 17th. I am also getting the error. Can you help please?
"AccountList's JS controller does not get a reference to the 'AccountsLoaded' event"

I am using the code copied from the trailhead "Build an Account Geolocation App - Using Events to Add Markers to the Map". My AccountsListController.js is as follows (exactly copied from the trailhead document)
  
({
    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.c:AccountsLoaded");
            event.setParams({"accounts": a.getReturnValue()});
            event.fire();
        });
    	$A.enqueueAction(action);
    }
})

Any ideas on what i am doing wrong?
Gindi SahotaGindi Sahota
I found a problem with the map marker - when clicking it, it didn't navigate me to the Account detail view, it didn't do anything. I put some logging in the helper function to see if it was being triggered at all, but it didn't seem to be. This is enabled by the code to capture the click event in 'accountsLoaded' controller function:

L.marker(latLng, {account: account}).addTo(map).on('click', function(event) {
                helper.navigateToDetailsView(event.target.options.account.Id);

and the helper function 'navigateToDetailsView' - in the AccountMap component:

({
    navigateToDetailsView : function(accountId) {
        var event = $A.get("e.force:navigateToSObject");
        event.setParams({
            "recordId": accountId
        });
        event.fire();
    }
})

Has anyone else seen that behaviour?
Siva N R ChamarthySiva N R Chamarthy
Hello Gindi,

Facing the same issue ..Please share if you found any resolution

Regards
Siva
Gindi SahotaGindi Sahota
Hi Siva, I didn't get a solution to this problem as yet.
David Roberts 4David Roberts 4
I have the same problem (also seen https://developer.salesforce.com/forums/?id=9060G000000BcOhQAK).
It seems var SObjEvent = $A.get("e.force:navigateToSObject");
is returning an undefined event object.

I even restructured the call to navigateToDetailsView slightly:
//helper.navigateToDetailsView(event.target.options.account.Id);
                helper.navigateToDetailsView(account);

I get a valid account id but not event.


navigateToDetailsView : function(account) {
        console.log("accountID="+account.Id);
        var SObjEvent = $A.get("e.force:navigateToSObject");
        console.log("event="+SObjEvent);
        SObjEvent.setParams({
            "recordId": account.Id
        });
        SObjEvent.fire();
    }

Anyone solved this?
David Roberts 4David Roberts 4
Found some clues on stack exchange
[https://salesforce.stackexchange.com/questions/86463/forcenavigatetosobject-call-not-working/185521#185521]
so I added a dependency tag
<aura:dependency resource="markup://force:navigateToSObject" type="EVENT"/> to the component
and got a valid event although nothing happens when you click.

I then added a few more implements to the AccountLocator component

<aura:component implements="force:appHostable,force:lightningQuickActionWithoutHeader,force:hasRecordId,force:appHostable,flexipage:availableForAllPageTypes">

and used the App Builder and it worked.

So it works from an app and on my mobile but not from a web page
....lightning.force.com/c/AccountLocatorApp.app

Something to do with it relying on \one\one.app

 
Rick UptonRick Upton
Thank you David Roberts 4!

I was getting the following error:

Uncaught TypeError: Cannot read property 'setParams' of undefined
throws at https://curious-raccoon-356623-dev-ed.lightning.force.com/c/components/c/AccountMap.js:40:15

Per your advice, I updated AccountLocator.cmp to the following: 
<aura:component implements="force:appHostable,force:lightningQuickActionWithoutHeader,force:hasRecordId,force:appHostable,flexipage:availableForAllPageTypes">
	<aura:dependency resource="markup://force:navigateToSObject" type="EVENT"/>
    <div>
        <div>
            <c:AccountMap />
        </div>
        <div>
            <c:AccountList />
        </div>
    </div>
</aura:component>
After doing that, I created a Lightning App Page, dragged the new custom component AccountLocator onto the page, activated the page and added it to an app. After doing all of that, I was able to go to navigate to my new Lightning App Page and click on a pin to open an account record.

I wonder if the explanation Nayana K gave as the "Best Answer" for a different question (https://developer.salesforce.com/forums/?id=9060G000000BhBxQAK) also applies here. She said:

When you try to launch the component via app [...], standard events ([...] navigateToSobject,  etc)  will be undefined. [...] Therefore launch your [component] in LEX via app builder or lightning quickaction or drag to detail page to check how it works.