When I select a row, I want to set the map center to the provided coordinates in Primeng. The issue is that while this.options works fine in ngOnInit, it doesn't work when called in the showCords() function. Below is my code:

gmap.component.ts

import {Component, OnInit} from '@angular/core';
import {Message} from '../message';
import {AppService} from '../app.service';
import {Map} from './map';

declare var google: any;

@Component({
    templateUrl: '/app/gmaps/gmap.component.html'
})

export class GMapComponent implements OnInit {

    options: any;
    selectedCord: Map[];
    map: Map = new PrimeCord();
    overlays: any[];

    dialogVisible: boolean;

    markerTitle: string;

    selectedPosition: any;

    infoWindow: any;
    selMap: boolean;
    draggable: boolean;

    msgs: Message[] = [];

    maps: Map[];

    constructor(private _appService: AppService) { }

    ngOnInit() {
        this.options = {
            center: { lat: 31.531259, lng: 74.352743 },
            zoom: 12
        };

        this.initOverlays();

        this.infoWindow = new google.maps.InfoWindow();
    }

    handleMapClick(event) {
        this.dialogVisible = true;
        this.selectedPosition = event.latLng;
    }

    handleOverlayClick(event) {
        this.msgs = [];
        let isMarker = event.overlay.getTitle != undefined;

        if (isMarker) {
            let title = event.overlay.getTitle();
            this.infoWindow.setContent('<div>' + title + '</div>');
            this.infoWindow.open(event.map, event.overlay);
            event.map.setCenter(event.overlay.getPosition());

            this.msgs.push({ severity: 'info', summary: 'Marker Selected', detail: title });
        }
        else {
            this.msgs.push({ severity: 'info', summary: 'Shape Selected', detail: '' });
        }
    }

    addMarker() {
        this.overlays.push(new google.maps.Marker({
            position: {
                lat: this.selectedPosition.lat(),
                lng: this.selectedPosition.lng()
            },
            title: this.markerTitle,
            draggable: this.draggable
        }));

        this.dialogVisible = false;
    }

    saveMarker(lat: number, lng: number) {
        debugger;
        this._appService.postCords(lat, lng, this.markerTitle).subscribe(
            error => console.log(error)
        );
        this.markerTitle = null;
    }

    handleDragEnd(event) {
        this.msgs = [];
        this.msgs.push({ severity: 'info', summary: 'Marker Dragged', detail: event.overlay.getTitle() });
    }

    initOverlays() {
        this._appService.getCords().subscribe(
            res => this.maps = res
        );

        if (!this.overlays || !this.overlays.length) {
            this.overlays = [
                new google.maps.Marker({ position: { lat: 31.531259, lng: 74.352743 }, title: "Siddiq Trade Centre" }),
                new google.maps.Marker({ position: { lat: 31.506739, lng: 74.384500 }, title: "Home" }),
                new google.maps.Marker({ position: { lat: 31.528251, lng: 74.402332 }, title: "Allama Iqbal International Airport" }),

            ];
        }
    }

    zoomIn(map) {
        map.setZoom(map.getZoom() + 1);
    }

    zoomOut(map) {
        map.setZoom(map.getZoom() - 1);
    }

    clear() {
        this.overlays = [];
    }


    onRowSelect(event) {
        debugger;
        this.selMap = true;
        this.map = this.cloneMap(event.data);

        this.showCords();
    }

    cloneMap(m: Map): Map {
        let map = new PrimeCord();
        for (let prop in m) {
            map[prop] = m[prop];
        }
        return map;
    }

    showCords() {
        this.overlays.push(new google.maps.Marker({
            position: {
                lat: this.map.lat,
                lng: this.map.lng
            },
            title: this.map.title
        }));
        this.options = {
            center: { lat: this.map.lat, lng: this.map.lng },
            zoom: 15
        }
    }
}

class PrimeCord implements Map {
    constructor(public title?, public lat?, public lng?) { }
}

gmap.component.html

<div class="ContentSideSections Implementation">
    <p-growl [value]="msgs"></p-growl>

    <p-gmap #gmap [style]="&#123;'width':'100%','height':'320px'&#125;" [options]="options" [overlays]="overlays"
            (onMapClick)="handleMapClick($event)" (onOverlayClick)="handleOverlayClick($event)" (onOverlayDragEnd)="handleDragEnd($event)"></p-gmap>
    <button type="button" pButton label="Clear" icon="fa-close" (click)="clear()" style="margin-top:10px"></button>
    <button type="button" pButton label="Reset" icon="fa-map-marker" (click)="initOverlays()" style="margin-top:10px"></button>
    <button type="button" pButton label="Zoom In" icon="fa-search-plus" (click)="zoomIn(gmap.getMap())" style="margin-top:10px"></button>
    <button type="button" pButton label="Zoom Out" icon="fa-search-minus" (click)="zoomOut(gmap.getMap())" style="margin-top:10px"></button>
    <p-dialog showEffect="fade" [(visible)]="dialogVisible" header="New Location">
        <div class="ui-grid ui-grid-pad ui-fluid" *ngIf="selectedPosition">
            <div class="ui-grid-row">
                <div class="ui-grid-col-2"><label for="title">Label</label></div>
                <div class="ui-grid-col-10"><input type="text" pInputText id="title" [(ngModel)]="markerTitle"></div>
            </div>
            <div class="ui-grid-row">
                <div class="ui-grid-col-2"><label for="lat">Lat</label></div>
                <div class="ui-grid-col-10"><input id="lat" type="text" readonly pInputText [ngModel]="selectedPosition.lat()" ngDefaultControl></div>
            </div>
            <div class="ui-grid-row">
                <div class="ui-grid-col-2"><label for="lng">Lng</label></div>
                <div class="ui-grid-col-10"><input id="lng" type="text" readonly pInputText [ngModel]="selectedPosition.lng()" ngDefaultControl></div>
            </div>
            <div class="ui-grid-row">
                <div class="ui-grid-col-2"><label for="drg">Drag</label></div>
                <div class="ui-grid-col-10"><p-checkbox [(ngModel)]="draggable" ngDefaultControl></p-checkbox></div>
            </div>
        </div>
        <footer>
            <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
                <button type="button" pButton label="Add Marker" icon="fa-plus" (click)="addMarker(); saveMarker(selectedPosition.lat(), selectedPosition.lng());"></button>
            </div>
        </footer>
    </p-dialog>
</div>
<div *ngIf="selMap">
    <h3>Title: {{map.title}}</h3>
    <h3>Latitude: {{map.lat}}</h3>
    <h3>Longitude: {{map.lng}}</h3>
</div>
<div>
    <p-dataTable [value]="maps" selectionMode="single" [(selection)]="selectedCord" 
                 (onRowSelect)="onRowSelect($event)" 
                 [paginator]="true" rows="15" [responsive]="true">
        <header>Record</header>
        <p-column field="title" header="Title" [sortable]="true"></p-column>
        <p-column field="lat" header="Latitude" [sortable]="true"></p-column>
        <p-column field="lng" header="Longitude" [sortable]="true"></p-column>
    </p-dataTable>
</div>