function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Emilien Guichard 40Emilien Guichard 40 

render threw an error in 'lightning:map' [Cannot read property 'length' of null]

Hello there,

I'm playing with the new lightning:map component and I'm trying to use a query to get account locations on the map.
I am currently experimenting this error : "render threw an error in 'lightning:map' [Cannot read property 'length' of null]"

Here is my code :
map component : 
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="AccountLocation">

        <!-- attributes -->
        <aura:attribute name="mapMarkers" type="Object"/>
        <aura:attribute name="zoomLevel" type="Integer" />
    
        <!-- handlers-->
        <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    
        <!-- the map component -->
        <lightning:map 
            mapMarkers="{! v.mapMarkers }" 
            zoomLevel="{!v.zoomLevel}" />
    
</aura:component>

controller : 
({   
     init: function (component, event, helper) {
        var action = component.get("c.getAccount");
        action.setCallback(this, function(response) {
            console.log('response'+response);
            var state = response.getState();
            console.log(state);
            if (state == "SUCCESS") {
                var obj =response.getReturnValue() ;
                console.log(obj);
                
                component.set('v.mapMarkers', obj);
                component.set('v.zoomLevel', 4);
            }
            
        });
        $A.enqueueAction(action); 
    }
    
})

apex controller: 
public class AccountLocation {
    @AuraEnabled
    public static List<Location> getAccount() {
        List< Account> accs =  [Select Id, Name,Type, Industry, BillingAddress,BillingStreet,
                                BillingCity, BillingCountry, BillingPostalCode,
                                Phone From Account where BillingCountry = 'France'] ;
        
        List<Location> loc = new List<Location>();
        for(Account acc :accs){
            GeoLocation geoInfo = new GeoLocation();
            geoInfo.Street = acc.BillingStreet;
            geoInfo.PostalCode = acc.BillingPostalCode;
            geoInfo.City = acc.BillingCity;
            geoInfo.Country = acc.BillingCountry;
            Location locDetail = new Location();
            locDetail.icon = 'standard:account'; 
            locDetail.title = acc.Name;
            locDetail.description = acc.Name;
            locDetail.location = geoInfo;
            
            loc.add(locDetail);
        }
        return loc ;
    }
    public class Location{
        @AuraEnabled 
        public String icon{get;set;} 
        @AuraEnabled 
        public String title{get;set;} 
        @AuraEnabled
        public String description{get;set;} 
        @AuraEnabled 
        public GeoLocation location{get;set;} 
    }
    public class GeoLocation{
        @AuraEnabled 
        public String Street{get;set;}
        @AuraEnabled 
        public String PostalCode{get;set;}
        @AuraEnabled 
        public String City{get;set;}
        @AuraEnabled 
        public String Country{get;set;}
    }
}

Thanks for your help !
Best Answer chosen by Emilien Guichard 40
Maharajan CMaharajan C
Hi Emilien,

There is two things you have missed:

1. If condition:   (Because here we have the server call which is not synchronous. so you you have to check the length)

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


2. State value in wrapper. If you are not including the state value then marker won't available in the screen 

Add one more property in GeoLocation wrapper.
 @AuraEnabled 
        public string State{get;set;}

Add the below line inside for loop: 
geoInfo.State = acc.BillingState;

And also add the Billingsate in SOQL.

Can you please Let me know if it helps or not!!!

If it helps don't forget to mark this as a best answer!!!

Thanks,
Maharajan.C

All Answers

Telmo Batista 5Telmo Batista 5
Hi

you need to use
<aura:if isTrue="{!v.mapMarkers.length > 0}" >
<lightning:map mapMarkers="{! v.mapMarkers }" zoomLevel="{!v.zoomLevel}" />
</aura:if>

to avoid load map without data since you are waiting for server data.

Best regards
Maharajan CMaharajan C
Hi Emilien,

There is two things you have missed:

1. If condition:   (Because here we have the server call which is not synchronous. so you you have to check the length)

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


2. State value in wrapper. If you are not including the state value then marker won't available in the screen 

Add one more property in GeoLocation wrapper.
 @AuraEnabled 
        public string State{get;set;}

Add the below line inside for loop: 
geoInfo.State = acc.BillingState;

And also add the Billingsate in SOQL.

Can you please Let me know if it helps or not!!!

If it helps don't forget to mark this as a best answer!!!

Thanks,
Maharajan.C
This was selected as the best answer
Emilien Guichard 40Emilien Guichard 40
Thanks a lot !