Have you ever worked with GeoLocation field in LWC?

There is a good possibility for you to come across a bottle neck in case you follow the documentation.

The reason I say that is, documentation says, when you want to display data in a datatable which includes a GeoLocation field then your columns property should look something like this.

{
    label: 'Longitude',
    fieldName: 'Location__Longitude__s',
    type: 'number',
    typeAttributes: {maximumFractionDigits: 8}
},
{
    label: 'Latitude',
    fieldName: 'Location__Latitude__s',
    type: 'number',
    typeAttributes: {maximumFractionDigits: 8}
}

But when you follow this code snippet it just shows blank fields and nothing much.

Here is the work around for it ..

{
    label: 'Longitude',
    fieldName: 'Location__Longitude__s',
    type: 'number',
    //type: 'location' → Documentation says type should be location but it
	//doesn't work that way and it only works when the type is number
    typeAttributes: {maximumFractionDigits: 8}
},
{
    label: 'Latitude',
    fieldName: 'Location__Latitude__s',
    type: 'number',
     //type: 'location' → Documentation says type should be location but it
	//doesn't work that way and it only works when the type is number
    typeAttributes: {maximumFractionDigits: 8}
}

Here is the complete JS file of the web component.

import { LightningElement ,api,wire,track} from 'lwc';
import getAccounts from '@salesforce/apex/AccountsController.getAccounts';
 
export default class dataTabelGeoLocation extends LightningElement {
    @track columns = [{
            label: 'Account Name',
            fieldName: 'Name',
            type: 'text',
            sortable: true
        },
        {
            label: 'Rating',
            fieldName: 'Rating',
            type: 'text',
            sortable: true
        },
        {
            label: 'Longitude',
            fieldName: 'Location__Longitude__s',
            type: 'number',
            //type: 'location' Documentation says type should be location but it doesn’t work that way 
            //and it only works when the type is number
            typeAttributes: {maximumFractionDigits: 8}
        },
        {
            label: 'Latitude',
            fieldName: 'Location__Latitude__s',
            type: 'number',
             //type: 'location' Documentation says type should be location but it doesn’t work that way 
             //and it only works when the type is number
            typeAttributes: {maximumFractionDigits: 8}
        }
 
    ];
    @track error;
    @track data ;
    @wire(getAccounts)
    wiredAccounts({error,data}) {
        if (data) {
            this.data = data;
            console.log(data);
            console.log(JSON.stringify(data, null, '\t'));
        } else if (error) {
            this.error = error;
        }
    }
}

Liked the post? Let me know what you think of it.

Interested in learning LWC Development with me? Subscribe to my course (use this if you are out of India).