la cuestión es que obtengo unos datos desde una petición get, y de esos datos tengo que sacar la posición y tal para crear unos marcadores y añadirlos al mapa, pero no se como hacerlo para que los datos estén disponibles al cargar el mapa, ya que en el 'for' del 'loadmap' no puedo usar 'length' he compprobado con 'console.log(this.datos) en el 'loadmap' y me dice undefined, aunque en el 'getDatos' console.log(this.datos)) muestra el array de objetos correctamente.
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
LatLng,
CameraPosition,
MarkerOptions,
Marker
} from '@ionic-native/google-maps';
import { Geolocation } from '@ionic-native/geolocation';
import {obtenerJsonService} from '../../services/obtenerJson';
declare var google;
declare var map;
@Component({
selector: 'page-home',
templateUrl: 'home.html',
providers: [obtenerJsonService]
})
export class HomePage{
datos: any;
constructor(public navCtrl: NavController, private googleMaps: GoogleMaps, private geolocation:Geolocation, private jsonService:obtenerJsonService) {
}
ngOnInit(){
this.getDatos();
this.loadMap
}
loadMap() {
let element: HTMLElement = document.getElementById('map');
let map: GoogleMap = this.googleMaps.create(element);
map.one(GoogleMapsEvent.MAP_READY).then(() => console.log('Map is ready!'));
let ionic: LatLng = new LatLng(24.434234, -3.9965);
let position: CameraPosition = {
target: ionic,
zoom: 13,
tilt: 30
};
map.moveCamera(position);
let io: LatLng = new LatLng(17.3849919, -2.973834000000099);
let markerOptions: MarkerOptions = {
position: io,
title: 'Titulo'
};
map.addMarker(markerOptions).then((marker: Marker) => {
marker.showInfoWindow();
});
//aqui cargaría los datos recibidos del Json como marcadores
for(var p=0; p<datos.length; p++){
let io: LatLng = new LatLng(datos[p].latitud, datos[p].longitud);
console.log(datos[p].titulo);
let markerOptions: MarkerOptions = {
position: io,
title: datos[p].titulo
};
map.addMarker(markerOptions).then((marker: Marker) => {
marker.showInfoWindow();
});
}
}
getDatos(){
this.jsonService.getDatos().subscribe(
data =>{
this.datos =data.json();
(console.log(this.datos))//aqui muestra correctamente los datos leidos
},
err => console.error(err),
()=> console.log('Datos Cargados')
);
}