[SalesForce] lightning-map does not show markers

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:
enter image description here

Best Answer

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>
Related Topic