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 Answer 1

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, 2020 at 9:17

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .