When I try to push the Google coordinates into an array, I am encountering some issues. Even though I have added the data, when I print console.log(this.markersData) it shows up as an empty array with objects-->[]
However, on the second click, I am able to get an array with an object like this [object]
https://i.sstatic.net/cd2R9.png
I also need access to the data from the first array. What could be causing this issue?
HTML
<button (click)="addPlace()" > </button>
Angular2 Function
import {Component, Input, OnInit, Output, EventEmitter, ElementRef} from '@angular/core';
import { Http, Headers, RequestOptions } from "@angular/http";
import { Observable } from 'rxjs/Rx';
export class GoogleMapComponent {
markersData: any[] = [];
addPlace(){
this.http.get('https://maps.googleapis.com/maps/api/geocode/json?address=Rom').map((res: any) => res.json())
.subscribe((res: any) => {
// console.log(res.results[0].geometry.location);
var geo = res.results[0].geometry.location;
if(geo != undefined){
this.markersData.push(geo);
}
},
(error: any) => {
console.log(error);
});
console.log(this.markersData);
}