3

I am creating a component that displays the current users accounts on a map. The map markers are not displaying. Am I overlooking something?

<template>
<div class="slds-m-around_medium">
    <template if:true={mapMarkers}>
            <lightning-map 
                map-markers={mapMarkers}
                markers-title={markersTitle}
                list-view={listView}
                >
            </lightning-map>
    </template>

</div>

import { LightningElement, track, wire } from 'lwc';
import Id from '@salesforce/user/Id';
import getUsersAccounts from '@salesforce/apex/AccountLocationController.getUsersAccounts';

export default class AccountMP extends LightningElement {
    @track mapMarkers;
    @track data;
    @track error;

    userId = Id;

    @wire(getUsersAccounts, {uId: '$userId'})
    wiredAccounts({error, data}){
        if(data) {
             this.mapMarkers = [
                 {
                     location:  {
                         Street: data.BillingStreet,
                         City: data.BillingCity,
                         PostalCode: data.BillingPostalCode,
                         State: data.BillingState,
                         Country: data.BillingCountry,
                     },

                     title: data.Name,
                 },
             ];
             this.error    = undefined;
             console.log('this.mapMarkers => ', JSON.stringify(this.mapMarkers));
         } else if (error) {
             this.error         = error;
             this.mapMarkers    = undefined;
             console.error('ERROR => ', error);
         }
    }
    listView = 'visible';
}
public with sharing class AccountLocationController {

    @AuraEnabled(Cacheable = true)
    public static List<Account> getUsersAccounts(Id uId){
        return [
            SELECT Id, Name, BillingStreet, BillingCity, BillingPostalCode, BillingState, BillingCountry 
            FROM Account 
            WHERE OwnerId = :uId
        ];
    }
}

  • What about .js file? – Oleh Berehovskyi Dec 4 '19 at 19:52
  • 1
    @OlehBerehovskyi Forgot to add it in the original post. Updated now. – Jemat Dec 4 '19 at 19:56
7

The issue here might be because your getUsersAccounts() method returns a List<Account> and you're trying to get a field from an Array and not from an Object within your wired function:

location:  {
   Street: data.BillingStreet,
   City: data.BillingCity,
   PostalCode: data.BillingPostalCode,
   State: data.BillingState,
   Country: data.BillingCountry,
},

So either return one single record from apex controller or treat the data var as an Array of records:

this.mapMarkers = data.map((account) => {
    return {
        location: {
            Street: account.BillingStreet,
            City: account.BillingCity,
            PostalCode: account.BillingPostalCode,
            State: account.BillingState,
            Country: account.BillingCountry,
        },
        title: account.Name,
    }
});
| improve this answer | |
  • 1
    Thanks! Do you know of any possible work around for the query limit? Not all records are rendering and I get the OVER_QUERY_LIMIT error. I Havent found any documentation amount what the limits are. – Jemat Dec 4 '19 at 21:10
  • 1
    This is a limit of Google Geocoding API developers.google.com/maps/premium/previous-licenses/articles/… I can recommend you to limit the maximum number records to return by using more specific filter conditions or by adding LIMIT clause to your SOQL query – Oleh Berehovskyi Dec 4 '19 at 21:17
  • 1
    Great thanks again. I have added LIMIT for now, but will find a way to more efficiently filter the records that are being returned. – Jemat Dec 4 '19 at 21:29
  • 1
    You're welcome) – Oleh Berehovskyi Dec 4 '19 at 21:32
  • 2
    Depending on your requirements and the sort of geographic distribution of the accounts, one nice way to apply a limit is by using DISTANCE between the User's home location (for example) and the account locations. This does, however, assume you have geocoded addresses in your org. – Phil W Dec 4 '19 at 21:37

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.