0

I have a very simple code to show some addresses on the map. I follow this example

The problem is that if i call an Apex function and assing the values inside after success state, the component is not loading at all. Could you please explain me why this occurs ? If i comment out the code that i call the Apex function and manage its state, it runs properly. But it does not make any sense to me. Any ideas? Code below: Cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,lightning:availableForFlowScreens,lightning:actionOverride"
                controller="fullCalendarController"
                access="global">
    <!-- attributes -->
    <aura:attribute name="mapMarkers" type="Object"/>
    <aura:attribute name="center" type="Object" />
    <aura:attribute name="zoomLevel" type="Integer" />
    <aura:attribute name="markersTitle" type="String" />
    <aura:attribute name="showFooter" type="Boolean" />

    <!-- handlers-->
    <aura:handler name="init" value="{! this }" action="{! c.doInit }"/>

    <!-- the map component -->
    <lightning:map
        mapMarkers="{! v.mapMarkers }"
        center="{! v.center }"
        zoomLevel="{! v.zoomLevel }"
        markersTitle="{! v.markersTitle }"
        showFooter="{ !v.showFooter }" >
    </lightning:map>

</aura:component>

JS Controller

//06/04/2020 @ggalaios: javascript controller for Maps Component
({
    doInit : function(component, event, helper) {
        console.log('start init');
        var action = component.get("c.getEventsForCurrentUser1");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                console.log(response.getReturnValue());
                component.set('v.mapMarkers', [
                    {
                        location: {
                            Street: '1 Market St',
                            City: 'San Francisco',
                            PostalCode: '94105',
                            State: 'CA',
                            Country: 'USA'
                        },

                        icon: 'utility:salesforce1',
                        title: 'Worldwide Corporate Headquarters',
                        description: 'Sales: 1800-NO-SOFTWARE'
                    },
                    {
                        location: {
                            Street: '950 East Paces Ferry Road NE',
                            City: 'Atlanta',
                            PostalCode: '94105',
                            State: 'GA',
                            Country: 'USA'
                        },

                        icon: 'utility:salesforce1',
                        title: 'salesforce.com inc Atlanta'
                    },
                    {
                        location: {
                            Street: '929 108th Ave NE',
                            City: 'Bellevue',
                            PostalCode: '98004',
                            State: 'WA',
                            Country: 'USA'
                        },

                        icon: 'utility:salesforce1',
                        title: 'salesforce.com inc Bellevue'
                    },
                    {
                        location: {
                            Street: '500 Boylston Street 19th Floor',
                            City: 'Boston',
                            PostalCode: '02116',
                            State: 'MA',
                            Country: 'USA'
                        },

                        icon: 'utility:salesforce1',
                        title: 'salesforce.com inc Boston'
                    },
                    {
                        location: {
                            Street: '111 West Illinois Street',
                            City: 'Chicago',
                            PostalCode: '60654',
                            State: 'IL',
                            Country: 'USA'
                        },

                        icon: 'utility:salesforce1',
                        title: 'salesforce.com inc Chicago'
                    },
                    {
                        location: {
                            Street: '2550 Wasser Terrace',
                            City: 'Herndon',
                            PostalCode: '20171',
                            State: 'VA',
                            Country: 'USA'
                        },

                        icon: 'utility:salesforce1',
                        title: 'salesforce.com inc Herndon'
                    },
                    {
                        location: {
                            Street: '111 Monument Circle',
                            City: 'Indianapolis',
                            PostalCode: '46204',
                            State: 'IN',
                            Country: 'USA'
                        },

                        icon: 'utility:salesforce1',
                        title: 'salesforce.com inc Indy'
                    },
                    {
                        location: {
                            Street: '361 Centennial Parkway',
                            City: 'Louisville',
                            PostalCode: '80027',
                            State: 'CO',
                            Country: 'USA'
                        },

                        icon: 'utility:salesforce1',
                        title: 'salesforce.com inc Louisville'
                    },
                    {
                        location: {
                            Street: '685 Third Ave',
                            City: 'New York',
                            PostalCode: '10017',
                            State: 'NY',
                            Country: 'USA'
                        },

                        icon: 'utility:salesforce1',
                        title: 'salesforce.com inc New York'
                    },
                ]);

                    component.set('v.center', {
                    location: {
                    City: 'Denver'
                    }
                    });

                    component.set('v.zoomLevel', 4);
                    component.set('v.markersTitle', 'Salesforce locations in United States');
                    component.set('v.showFooter', true);
                    console.log('end of suc')
                    } else if(state == "INCOMPLETE"){
                    var toastEvent = $A.get("e.force:showToast");
                    toastEvent.setParams({
                    "title": "Oops!",
                    "message": "No Internet Connection",
                    type: "warning",
                    });
                    toastEvent.fire();
                    } else if(state == "ERROR"){
                    var toastEvent = $A.get("e.force:showToast");
                    toastEvent.setParams({
                    "title": "Error Occured!",
                    "message": "Please contact your Administrator and try again later.",
                    type: "error",
                    });
                    toastEvent.fire();                    
                    }
                    });
                    $A.enqueueAction(action);
                    },
                    })
1

Are you running into the following error?

render threw an error in 'lightning:map' [Cannot read property 'length' of null] Failing descriptor: {markup://lightning:map}

If yes, then you need to modify the component HTML as follows:

<aura:if isTrue="{!v.mapMarkers.length > 0}">
    <lightning:map
        mapMarkers="{! v.mapMarkers }"
        center="{! v.center }"
        zoomLevel="{! v.zoomLevel }"
        markersTitle="{! v.markersTitle }"
        showFooter="{ !v.showFooter }" >
    </lightning:map>
</aura:if>

Please note that the $A.enqueueAction(action) enqueues the server side calls to be executed asynchronously. You can read about this here. So, while the server call is executing, the aura framework is trying to evaluate the <lightning:map> and failing to find its attribute values. Enclosing the lightning:map component with aura:if will restrict the early evaluation of the component.

1
  • Thank you so much Arut! You are right, this was the case. Apr 6 '20 at 9:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.