lightning-map does not show markers

Question

I've got a parent-child-relationship where the parent is called portfolio and the child called property object. All child objects have geolocation and address information.

I am implementing a lightning-map on the parent object and want to show all property objects by geolocation on the map.

The current problem is: When I do this dynamically with soql (by an apex class) no markers are shown. When I do this statically the markers are show.

That is my structure returning from the query (console.log):

[
    {
        "Name": "Hanseatic Trade Center Tower (Columbus Haus)",
        "Geolocation__Latitude__s": 53.542909,
        "Geolocation__Longitude__s": 9.985547,
        "Street__c": "Am Sandtorkai 38 – 41",
        "PostalCode__c": "20457",
        "City__c": "Hamburg",
        "Country__c": "Germany"
    }
]

This is the content from the map marker array:

[
    {
        "location": {
            "City": "Hamburg",
            "Country": "Germany",
            "PostalCode": "20457",
            "Street": "Am Sandtorkai 38 – 41"
        }
    }
]

My code looks like the following:

import { LightningElement, api, track, wire } from 'lwc';
import relatedObjects from '@salesforce/apex/LWCPortfolioHelper.relatedObjects';

export default class PortfolioMap extends LightningElement {
    @api recordId;
    @track mapMarkers = [];
    hasRendered = false;

    renderedCallback(){
        console.log('>>>PortfolioMap -- renderedCallback.');

        if(! this.hasRendered){
            this.hasRendered = true;
            this.handleLoad();
        }
    }

    handleLoad(){
        relatedObjects({recordId: this.recordId})
        .then(result => {
            result.forEach(record => {
                let marker = {
                    location: {
                        City: record.City__c,
                        Country: record.Country__c,
                        PostalCode: record.PostalCode__c,
                        Street: record.Street__c,
                    }

                };
                this.mapMarkers.push(marker);
            })

        })
        .catch(error => {
            console.error('>>>error: ' + error);
        })
    }
}

My template looks like the following (No marker on map):

<template>
    <lightning-map
        map-markers={mapMarkers}
        markers-title='All related objects to this portfolio'
        list-view='visible'
    ></lightning-map>
</template>

The result looks like the following:

Answer 1

I would suspect it is a timing issue - you are rendering the template before the data is available, and so it doesn't re-render when data is loaded. I would suggest taking a look at the wire service in the docs - specifically using a function with a wire call, and then only rendering the template when the data is returned - e.g.

  @api recordId;
    @track record;
    @track error;

    @wire(getRecord, { recordId: '$recordId', fields: ['Account.Name'] })
    wiredAccount({ error, data }) {
        if (data) {
            this.record = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.record = undefined;
        }
    }

And then in the template, use the if statement to handle the rendering - that way the component will take care of the component life cycle for you:

<template if:true={record}>
        <div class="slds-m-around_medium">
            <p>{name}</p>
        </div>
    </template>

Answer 2

I found the issue by myself. The distinctiveness is that you could not add object dynamically to an array.

the following DOES NOT work:

handleLoad(){
        console.log('>>>PortfolioMap -- handleLoad.');
        console.log('>>>this.recordId: ' + JSON.stringify(this.recordId, null, '\t'));

        searchRelatedObjectsBySoql({recordId: this.recordId})
        .then(result => {

            result.forEach(record => {
                let marker = {
                    location: {
                        Latitude: record.Geolocation__Latitude__s,
                        Longitude: record.Geolocation__Longitude__s
                    },
                    title: record.Name,
                    description: '',
                    icon: 'utility:salesforce1'
                };

                this.mapMarkers.push(marker);
            })

            this.mapMarkers = tempMarkers;
        })
        .catch(error => {
            console.error('>>>error: ' + error);
        })
    }

The following code works:

handleLoad(){
        searchRelatedObjectsBySoql({recordId: this.recordId})
        .then(result => {

            let tempMarkers = [];
            result.forEach(record => {
                let marker = {
                    location: {
                        Latitude: record.Geolocation__Latitude__s,
                        Longitude: record.Geolocation__Longitude__s
                    },
                    title: record.Name,
                    description: '',
                    icon: 'utility:salesforce1'
                };

                tempMarkers.push(marker);
            })

            this.mapMarkers = tempMarkers;
        })
        .catch(error => {
            console.error('>>>error: ' + error);
        })
    }

The differen lay in the following lines: 1) WORKS: tempMarkers.push(marker); this.mapMarkers = tempMarkers;

2) DON'T WORK: this.mapMarkers.push(marker);