Map.ts - Travlendar

import { Component } from '@angular/core';
import { IonicPage, ModalController, ViewController, LoadingController, AlertController } from 'ionic-angular';
import { DatePicker } from 'ionic2-date-picker';

import { Appointment } from '../../models/appointment';
import { Geolocation } from '@ionic-native/geolocation';
import { User } from '../../models/user';
import { Storage } from '@ionic/storage';
import { Http, Headers } from '@angular/http';

declare var google;

@IonicPage()
@Component({
  selector: 'page-map',
  templateUrl: 'map.html',
  providers: [DatePicker, Geolocation]
})

export class MapPage {

  public user = new User('', '', '', '', {});
  public appointments: Appointment[];
  public coords = [];

  constructor(public datePicker: DatePicker,
    public modalCtrl: ModalController,
    public viewCtrl: ViewController,
    public geolocation: Geolocation,
    private _loadingCtrl: LoadingController,
    readonly storage: Storage,
    private _http: Http,
    private _alertCtrl: AlertController) {
    this.datePicker = new DatePicker(<any>this.modalCtrl, <any>this.viewCtrl);
    this.datePicker.onDateSelected.subscribe((date) => { console.log(date); });

    this.storage.get('user').then((userLoggedIn) => {
      if(userLoggedIn != null){
        this.user = userLoggedIn;
      }
    });
  }

  ionViewDidEnter() {
    var headers = new Headers();
    headers.append("Accept", 'application/json');
    headers.append('Content-Type', 'text/plain');

    let json = JSON.stringify({ email: '' });

    let loader = this._loadingCtrl.create({
      content: 'Loading appointments, please wait ...'
    });

    loader.present();

    this._http.post('http://ec2-18-220-255-245.us-east-2.compute.amazonaws.com:8080/backend-ttac/getUserAppointments?email=' + this.user.email, json, { headers: headers })
      .subscribe(data => {

        loader.dismiss();
        this.appointments = JSON.parse(data['_body']);
        if (this.appointments.length === 0) {
          let alert = this._alertCtrl.create({
            title: 'Attention!!',
            subTitle: 'You have no registered appointments.',
            buttons: ['Ok']
          });
          alert.present();
        }
      }, (err) => {
        loader.dismiss();
        console.log(err);
      });

      this.loadMap();
  }

  loadMap() {
    this.geolocation.getCurrentPosition().then((position) => {

      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 11,
        center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      for(var i = 0; i < this.appointments.length; i++){
        let address = this.appointments[i].streetName + ' ' + this.appointments[i].number + ' ' + this.appointments[i].city + ' ' + this.appointments[i].state + ' ' + this.appointments[i].postcode;
        this.getCoordinates(address, i, map)
      }

      var directionsService = new google.maps.DirectionsService;
      var directionsDisplay = new google.maps.DirectionsRenderer;

      directionsDisplay.setMap(map);
    }, (err) => {
      console.log(err);
    });

  }

  getCoordinates(address, i, map){
    let geocoder = new google.maps.Geocoder();

    geocoder.geocode({address: address}, function (results, status){
      if(status == 'OK'){
        let lat = results[0].geometry.location.lat();
        let lng = results[0].geometry.location.lng();

        new google.maps.Marker({
          map: map,
          animation: google.maps.Animation.DROP,
          position: new google.maps.LatLng(lat, lng),
          label: '' + (i + 1) + ''
        });
      }
    })
  }

  openCalendar() {
    this.datePicker.showCalendar();
  }
}