+ Start a Discussion
Amey K 10Amey K 10 

Lighting-map in LWC

Can we customize the location list in Lightning-Map ? Instead of location I would like to have another field.
Amey K 10Amey K 10
Hi Valentin,
Thanks for you response.
With reference to the screenshot below, I would like to display something different instead of address or geolocation in the marker table.

Map Marker

Regards,
Amey
 
Valentin F.Valentin F.
Hi Amey,

https://developer.salesforce.com/docs/component-library/bundle/lightning:map/example#lightningcomponentdemo:exampleMapMultipleMarkers
This is the documentation for lightining:map. 
 
cmp.set('v.mapMarkers', [
            {
                location: {
                    City: 'Cap-d\'Ail',
                    Country: 'France'
                },

                icon: 'custom:custom26',
                title: 'Cap-d\'Ail'
            },

As you can see in the Controller tab you can give different values, icons etc.

I advise you to create a wrapper class to get each information you want to display in your front.
public class myClass {

    @AuraEnabled
    public static myInnerClass getStuff(Id stuffVar) {
        myInnerClass mic = new myInnerClass();
        mic.someVar = stuffVar;
        Object__c obj =[SELECT f1, f2, f3 FROM Object__c WHERE Id =: stuffVar];
        mic.someObject = obj;
        return mic;
    }
    private class myInnerClass {
        Id someVar {get; set;}
        String someOtherVar {get; set;}
        Integer someOtherOtherVar {get; set}
        Object__c someObject {get; set;}
    }

}
Here you got an example !

Let me know if it helped you.
Have a good day,
Valentin
Amey K 10Amey K 10
Hi Valentin,
In the location component of the marker we set city and country which shows up on the marker list.
I wanted to show phone number and email. so tht it looks like this.
User-added image

Regards,
Amey
Valentin F.Valentin F.
Hi Amey,

Following my example above, you need to create an inner classe with :
String phone {get;set;}
String email {get;set;}
Then you give them values in your main method :
myInnerClass mic = new myInnerClass();
mic.phone = account.phone;
mic.email = account.email;
return mic;
You return this object to your front and use them to build your list :
cmp.set('v.mapMarkers', [
                           {
                               mic: {
                                    Phone: mic.phone,
                                    Email: mic.email
                                    },
                           },

                        ]);




 
Amey K 10Amey K 10
Hi Valentin,
I tried the code suggested by you. However now the locations are not shown on the map.
Can you put in you working code for better understanding ?

Regards,
Amey