LWC Map markers not rendering

Question

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
        ];
    }
}

Answer 1

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,
    }
});