1

I'm trying to use the google maps LWC to display a map on a record page that contains basic address info. I'm having two problems; 1) Getting the record Id. 2) Getting the address info

I have (or at least I think I have) debugged the variable values using devTools and found that they are undefined. Can anyone tell me what Im doing wrong?

HTML

<template>
<lightning-map
        map-markers={mapMarkers}
></lightning-map>
<lightning-record-view-form
        record-id={recordId}
        object-api-name={secObject}>
</lightning-record-view-form>

JS

import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import SECURITY_OBJECT from '@salesforce/schema/Securities__c';
import STREET_FIELD from '@salesforce/schema/Securities__c.Street_del__c';
import CITY_FIELD from '@salesforce/schema/Securities__c.Street_del__c';
import POSTCODE_FIELD from '@salesforce/schema/Securities__c.Zip_Postal_Code_del__c';

export default class LightningExampleMapSingleMarker extends LightningElement {

    @api recordId;

    /* Expose schema objects/fields to the template. */
    secObject = SECURITY_OBJECT;

    /* Load Account.Name for custom rendering */
    @wire(getRecord, { recordId: '$recordId', fields: [STREET_FIELD, CITY_FIELD, POSTCODE_FIELD] })
    record;

    mapMarkers = [
        {
            location: {
                Street: STREET_FIELD,
                City: CITY_FIELD,
                State: POSTCODE_FIELD,
            },

            title: 'The White House',
            description:
                'Landmark, historic home & office of the United States president, with tours for visitors.',
        },
    ];
}
8
  • recordId definition seemed to be find. So if you add renderedCallback() and debug recordId it should be populated
    – ytiq
    Aug 30 '19 at 10:29
  • Thanks for the response. You mean like this? export default class LightningExampleMapSingleMarker extends LightningElement { @api recordId; renderedCallback() { recordId; }
    – Jay
    Aug 30 '19 at 10:36
  • ye, but you forgot this. ``` renderedCallback() { console.log(this.recordId); } ```
    – ytiq
    Aug 30 '19 at 10:41
  • Thanks! ..its still undefined in the console
    – Jay
    Aug 30 '19 at 10:45
  • Is this is exposed component and you are adding it directly onto Lightning Record Page?
    – ytiq
    Aug 30 '19 at 10:46
2

ISSUES:

  1. You are directly assigning data to mapMarkers during declaration of class - you did not even get the data from wire service at this point (In fact, getRecord will not even be invoked at this point. It will just be declared with undefined data and error) .
  2. Street should have value in mapMarkers and not field API name STREET_FIELD .
  3. You do not need lightning-record-view-form in template as you not showing any info. getRecord is good enough to get data - you dont need anything else .

SOLUTION:

  1. You should assign data to mapMarkers after getting data from getRecord service. This should be ideally wired function as you need to process the record data in Javascript .
  2. Use conditional rendering in template as lightning will throw error when map-markers is supplied undefined. And map-markers will not get data until getRecord service returns data.

Below is the example which uses Account object:

HTML:

<template>
    <template if:true={mapMarkers}>
        <lightning-map map-markers={mapMarkers}></lightning-map>
    </template>
</template>

JS:

import { LightningElement, wire, api, track } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import STREET_FIELD from '@salesforce/schema/Account.BillingStreet';
import CITY_FIELD from '@salesforce/schema/Account.BillingCity';
import POSTCODE_FIELD from '@salesforce/schema/Account.BillingState';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import DESCRIPTION_FIELD from '@salesforce/schema/Account.Description';

export default class Poc extends LightningElement {
    @api recordId;
    @track mapMarkers;

    @wire(getRecord, {
        recordId: '$recordId',
        fields: [ STREET_FIELD, CITY_FIELD, POSTCODE_FIELD, DESCRIPTION_FIELD, NAME_FIELD ]
    })
    fetchAcc({ data, error }) {
        if (data) {
            this.mapMarkers = [
                {
                    location: {
                        Street: data.fields.BillingStreet.value,
                        City: data.fields.BillingCity.value,
                        State: data.fields.BillingState.value
                    },

                    title: data.fields.Name.value,
                    description: data.fields.Description.value
                }
            ];
            console.log('this.mapMarkers => ', JSON.stringify(this.mapMarkers));
        } else if (error) {
            console.error('ERROR => ', error);
        }
    }
}
3
  • Thanks for this :) ..can I ask why you hard code the id ? @api recordId = '0010K000028HCgAQAW';
    – Jay
    Sep 2 '19 at 15:41
  • Just a default - for my testing - if you dont pass the value (not loaded in record context), that value will be taken - removing it Sep 2 '19 at 16:43
  • Ah ok cool. Thanks for confirming
    – Jay
    Sep 2 '19 at 20:55

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.