0

I'm trying to follow an example for a super simple map LWC that plots some coordinates and I'm just getting nothing.

Can someone point out my obviously stupid error? I can't get the markers to render on the map. The class returns the right data, but I'm not seeing the pins.

Thanks in advance.

Apex Class:

public class GetHeadstoneLocation {
    @AuraEnabled
    public static List<Location> GetHeadstoneLocation() {
        List<Headstone__c> heads = [SELECT Id, Headstone_Location__Latitude__s, Headstone_Location__Longitude__s FROM Headstone__c ];

        List<Location> loc = new List<Location>();
        for(Headstone__c head : heads) {
            system.debug(head);
           Location locDetail = new Location();
           locDetail.icon = 'action:map';
           locDetail.title = head.Name;
           locDetail.description = head.Name;
           locDetail.latitude = head.Headstone_Location__Latitude__s;
           locDetail.longitude = head.Headstone_Location__Longitude__s;

           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 Double latitude{get;set;} 
        @AuraEnabled 
        public Double longitude{get;set;} 
        }
        }

Controller:

import GetHeadstoneLocation from '@salesforce/apex/GetHeadstoneLocation.GetHeadstoneLocation';

export default class CemetaryMap extends LightningElement {
    @track headstones = [];
    @track error;
    @track showFooter = true;

    @wire(GetHeadstoneLocation)
    wiredHeadstones({error,data}) {
        if(data) {
            this.headstones = data;
            console.log(data);
            console.log(JSON.stringify(data,null, '\t'));
        } else if (error) {
            this.error = error;
        }
    }
}```

HTML:

    <h6> Cemetary Maps Example </h6>
    <template if:true={headstones}>
        <lightning-map map-markers={headstones}  markers-title={headstones}>
        </lightning-map>
</template>
</template>

I must just be doing something wrong somewhere. Any help would be much appreciated.

  • try changing 'latitude' to 'Latitude' and same for longitude in apex class – User6670 Apr 9 at 22:36
2

In you JS file try adding Latitude and Longitude like this:

import GetHeadstoneLocation from '@salesforce/apex/GetHeadstoneLocation.GetHeadstoneLocation';

export default class CemetaryMap extends LightningElement {
    @track headstones = [];
    @track error;
    @track showFooter = true;

    @wire(GetHeadstoneLocation)
    wiredHeadstones({error,data}) {
        if(data) {
        this.headstones = data.map(stone => {
        const Latitude = stone.latitude;
        const Longitude = stone.longitude;
        return {
            location: { Latitude, Longitude }
        };
    });  
        } else if (error) {
            this.error = error;
        }
    }
}```
| improve this answer | |
  • This worked! Thank you so much! – bblackinton Apr 9 at 23:14
  • If I map them this way, how can I get the titles to show up instead of just the coordinates? – bblackinton Apr 9 at 23:17
  • Its the same way how you get location. Have a variable this.title and assign the value from the incoming data – SfdcBat Apr 9 at 23:19
  • I got it, thanks <3 – bblackinton Apr 9 at 23:42

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.