I have a simple class that loads in a google map, does some ajax and then on that response will eventually place some markers on the map, the class looks like, this,

class Map extends BaseComponent {

    constructor(element) {
        super(element);
        this._element = element;
        this.init();
    }
    
    init() {
        this.initialiseLoader();
    }

initialiseLoader(position = {}) {
        const loader = new Loader({
            apiKey: 'xxxxxxxx',
            version: 'weekly',
            libraries: []
        });

        loader.load()
            .then((google) => {
                this.map = new google.maps.Map(document.querySelector('.lta-map'), {
                    zoom:12
                });
                this.map.setCenter({
                    lat: Manipulator.getDataAttribute(document.querySelector('.lta-map'), 'latitude'),
                    lng: Manipulator.getDataAttribute(document.querySelector('.lta-map'), 'longitude')
                });
                this.placeMarkers();
                return true;
            })
            .catch((error) => { alert(error) });
    }

    async placeMarkers() {
        const markers = await Request.get(`${this.endpoint}?/latititude=${Manipulator.getDataAttribute(document.querySelector('.lta-map'), 'latitude')}&longitude=${ Manipulator.getDataAttribute(document.querySelector('.lta-map'), 'longitude')}`)
        .catch(() => { 
            console.log('error');
        });

        console.log(markers);
    }
}

The maps loads fine but when it hits the this.placeMarkers() call I get an error message claiming that,

this.placeMarkers is not a function

Is it because it's an async function?