0

I am using Lightning-maps and display all accounts there owned by particular user. So when user goes to LWC-Maps component, user sees all owned accounts as a mapMarkers.(Screen 1) When user hits on marker, I displays popup with dynamic information e.g Account Name, Address ETC. (Screen 2).

To display Account information dynamically, and assign mapMarket colors based on Account priority, I am running "forEach" loop on the data object received from Wire method/Apex Controller. All works perfectly fine till here. Next what I am trying to do is:

When I hit the mapMarker, child LWC component appears. Into Child component, I am inputting values which are displayed into parent mapMarker popup. In my case, the account name which is displayed to mapMarker popup, should be passed to child LWC component.

What actually happens is, after "ForEach" loop run and I assign values to "accountName" variable, into mapMaker popup it is displayed as a single account. In other workds, if I hit to Account A mapMarker, it shows Account A into popup. But when I pass the same variable "accountName" to child LWC component I see all account.Name values coming from "ForEach" loop. (Console Log attached) Please help me understand why same variable "accountName" behaves differently into parent and child component and if there is a way to pass same account Name value to child LWC component? Thanks a lot and sorry if I could not explain it better. :)

Screen 1 Screen 2 Console Log

@wire(Fetchaccs, {})
wireAccount({ error, data }) {
    if (data) {
        data.forEach(dataItem => {             
            this.category = dataItem.Priority;
            this.accountId = dataItem.Id;
            this.accountName = dataItem.Name;
            console.log('accountName' + this.accountName);

            if(dataItem.Priority== 'Critical'){
                 this.fillColor = 'Red';
            } else if(dataItem.Priority== 'High'){
                this.fillColor = 'Orange';
            } else if(dataItem.Priority== 'Medium'){
                this.fillColor = '#85C1E9';
            } else {
                this.fillColor = '#ECF0F1';
            }
            this.mapMarkers = [...this.mapMarkers,
            {
                location: {
                    Latitude: dataItem.BillingLatitude,
                    Longitude:dataItem.BillingLongitude
                },

                title: 'Google Maps',
                description: '<b>Priority - </b>' +  this.category +
                             '<br><b>Account - </b>'+ this.accountName +
                             '<br><b>Address - </b>'+ this.address, 

                mapIcon : {
                    path: this.pathGoogle,
                    fillColor: this.fillColor,
                    fillOpacity: 0.8,
                    strokeWeight: 1.5,
                    strokeOpacity: 0.8,
                    scale: 1,
                },
            }
            ];
        });
        this.error = undefined;
        
    } else if (error) {
        this.error = error;
    }
}


listView = 'hidden';
draggable = false;
scrollwheel =true;
 


 handleMarkerSelect(event) { 
    callchildcomponent = true; //Child component is called here. 
 }

--------------APEX Controller-----------------

public with sharing class classname{

@AuraEnabled(cacheable=true)
public static List<Account> Fetchaccs() {
    
    return [select id, Name, BillingLatitude, BillingLongitude from account];
}

}

1 Answer 1

0

You're setting the data at the wrong time. Use the handleMarkerSelect event to store the selected data, instead. Something like this should be pretty close.

  @wire(Fetchaccs, {})
  wireAccount({ error, data }) {
    if (data) {
      this.mapMarkers = data.map((dataItem) => {
        const result = {};
        result.category = dataItem.Priority;
        result.accountId = dataItem.Id;
        result.value = dataItem.Id;
        switch (dataItem.Priority) {
          case "Critical":
            result.fillColor = "Red";
            break;
          case "High":
            result.fillColor = "Orange";
            break;
          case "Medium":
            result.fillColor = "#85C1E9";
            break;
          default:
            result.fillColor = "#ECF0F1";
        }
        result.location = {
          Latitude: dataItem.BillingLatitude,
          Longitude: dataItem.BillingLongitude,
        };
        result.title = "Google Maps";
        result.description = `<b>Priority - </b>${result.category}<br><b>Account - </b>${result.accountName}<br><b>Address - </b>${result.address}`;
        result.mapIcon = {
          path: thispathGoogle,
          fillColor: result.fillColor,
          fillOpacity: 0.8,
          strokeWeight: 1.5,
          strokeOpacity: 0.8,
          scale: 1,
        };
        return result;
      });
    } else if (error) {
      this.error = error;
    }
  }

  listView = "hidden";
  draggable = false;
  scrollwheel = true;

  handleMarkerSelect(event) {
    // Currently selected marker data
    this.selectedMarker = this.mapMarkers.find(
      (marker) => marker.value === event.detail.selectedMarkerValue
    );
    callchildcomponent = true; //Child component is called here.
  }

You must log in to answer this question.

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