Hey!
Trying to show all the locations from my json file on google maps with ionic native google maps plugin:
I have a seperate provider containing the data, i would like to use for cycle and load all the markers, json example:
“locations”: [
{
"title": "Kerek-tó",
"latitude": 47.800618,
"longitude": 18.806419
},
export class TerkepPage {
map:GoogleMap;
lat:any; lang:any;
constructor(public locations: HelyekProvider,private toastCtrl: ToastController,private plt: Platform,private geolocation: Geolocation, public navCtrl: NavController) {
this.plt.ready().then(()=>{
var options={timeout: 15000};
this.geolocation.getCurrentPosition(options).then(resp=>{
this.lat=resp.coords.latitude;
this.lang=resp.coords.longitude;
this.loadGoogleMap();
}).catch(()=>{
console.log("sikertelen location");
this.lat=47.49801;
this.lang=19.03991;
this.loadGoogleMap();
this.presentToast();
});
});
}
ionViewDidLoad(){
}
presentToast() {
let toast = this.toastCtrl.create({
message: 'A helyadatok lekérdezése nem sikerült! Budapest lett megjelölve!',
duration: 3000,
position: 'bottom',
showCloseButton: true,
closeButtonText: "OK",
});
toast.present();
}
loadGoogleMap(){
let mapOptions: GoogleMapOptions = {
camera: {
target: {
lat: this.lat,
lng: this.lang
},
zoom: 10,
tilt: 30
}
};
let map = GoogleMaps.create('map_canvas', mapOptions);
let locationsLoaded = this.locations.load();
this.map.one(GoogleMapsEvent.MAP_READY)
.then(() => {
this.map.addMarker({
title: 'Jelenlegi helyzet',
icon: 'yellow',
animation: 'DROP',
position: {
lat: this.lat,
lng: this.lang
}
})
.then(marker => {
marker.on(GoogleMapsEvent.MARKER_CLICK)
.subscribe(() => {
});
});
});
}
The provider i am loading:
load(){
if(this.data){
return Promise.resolve(this.data);
}
return new Promise(resolve => {
this.http.get('assets/data/locations.json').map(res => res.json()).subscribe(data => {
this.data = this.applyHaversine(data.locations);
this.data.sort((locationA, locationB) => {
return locationA.distance - locationB.distance;
});
resolve(this.data);
});
});
}
Can anyone help me to add all those markers with the titles in my json file?