The complexity of the problem with angular 2 google map

Question

I created a google map using an example of Sebastian. I can download the map. But my requirement is to look for the places that I type in the search box, and then it should put the marker on the map. I can also search for this place, but could not find it on the map. If I scroll the map marker, it will be automatic. Below is my code. Suggest me if you know any other way to do this or any other example.

            <div class="fieldMap">
                    <sebm-google-map 
                    [latitude]="lat"
                    [longitude]="lng"
                    [zoom]="zoom"
                    [disableDefaultUI]="true"
                    [zoomControl]="true"
                    [disableDefaultUI]="false"
                    (mapClick)="mapClicked($event)">

                    <sebm-google-map-marker 
                    *ngFor="let m of markers; let i = index"
                    [latitude]="m.lat"
                    [longitude]="m.lng"
                    [label]="m.label">
                    </sebm-google-map-marker>                   
            </sebm-google-map> 

And the script part

  getAddress(place:Object) { 
    this.markers = [];
    var address = this.step1Data.map_address;
    if (!address) return false;
    var geocoder = new google.maps.Geocoder();
    var that = this;

    geocoder.geocode({ 'address': address }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var location = results[0].geometry.location;
            that.lat =  location.lat();
            that.lng = location.lng();
            that.markers.push({
                lat: that.lat,
                lng: that.lng,
                label: 'A',
                draggable: false
            })
        } 
    });
}

Answer 1

The problem was a timeout. If I press the buttons with setTimeout later, it will work correctly.

geocoder.geocode({ 'address': address }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var location = results[0].geometry.location;
            that.lat = location.lat();
            that.lng = location.lng();
        } else {
            that.step1["gmapError"] = "Geocode was not successful for     the following reason: " + status;
        }
    });

    setTimeout(() => {
            this.markers.push({
                lat: that.lat,
                lng: that.lng,
                label: 'A',
                draggable: false
            });
    }, 100);