Google DirectionService

gistfile1.txt

import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController } from 'ionic-angular';
import { Http } from '@angular/http'
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/catch'

import { Geolocation } from '@ionic-native/geolocation';

import { GM_API } from '../../app.api'
import { ErrorHandler } from '../../app.error-handler'

declare var google;

@IonicPage()
@Component({
  selector: 'page-clinica-mapa',
  templateUrl: 'clinica-mapa.html',
})
export class ClinicaMapaPage {

  @ViewChild('map') mapElement: ElementRef;
  @ViewChild('directionsPanel') directionsPanel: ElementRef;
  map: any
  directionsService = new google.maps.DirectionsService
  directionsDisplay = new google.maps.DirectionsRenderer

  public clinica: Array<{}>
  public latDestination: number
  public lngDestination: number


  constructor(
    // public platform: Platform,
    public http: Http,
    public navCtrl: NavController,
    public navParams: NavParams,
    public geolocation: Geolocation,
    public loadingCtrl: LoadingController) {

    let id = navParams.get('id')
    this.loadMap(id)
  }

  ionViewDidLoad() { }

  loadMap(id: string): void {
    let loading = this.loadingCtrl.create({
      content: 'Carregando....'
    });
    loading.present();

    this.http.get(`${GM_API}/clinicas/search/${id}.json`)
      .map(res => res.json())
      .catch(ErrorHandler.handleError)
      .subscribe(data => {
        let latLngDestination = {
          'lat': +data.clinicas[0].Clinica.latitude,
          'lng': +data.clinicas[0].Clinica.longitude
        }

        this.getMyPosition(latLngDestination)

        // loading.dismiss()
      })

    setTimeout(() => {
      loading.dismiss()
    }, 5500);
  }

  getMyPosition(latLngDestination) {
    this.geolocation.getCurrentPosition().then((position) => {

      let latLngOrigin = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
      // let latLngOrigin = {
      //   'lat': -23.421864,
      //   'lng': -51.9345094
      // }

      let mapOptions = {
        center: latLngOrigin,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

      this.startNavigating(latLngOrigin, latLngDestination)
    }, (err) => {
      console.log('Erro: ' + err)
    });

  }

  startNavigating(latLngOrigin, latLngDestination) {
    let directionsService = new google.maps.DirectionsService;
    let directionsDisplay = new google.maps.DirectionsRenderer;

    directionsDisplay.setMap(this.map)
    directionsDisplay.setPanel(this.directionsPanel.nativeElement)

    directionsService.route({
      origin: latLngOrigin,
      destination: latLngDestination,
      // destination: { lat: -23.4241850, lng: -51.9507944 },
      travelMode: google.maps.TravelMode['DRIVING']
    }, (res, status) => {

      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(res);
      } else {
        console.warn(status);
      }
    });
  }

  addInfoWindow(marker, content) {
    let infoWindow = new google.maps.InfoWindow({
      content: content
    });
    google.maps.event.addListener(marker, 'click', () => {
      infoWindow.open(this.map, marker);
    });
  }

  addMarker(content: string) {
    let marker = new google.maps.Marker({
      map: this.map,
      animation: google.maps.Animation.DROP,
      position: this.map.getCenter()
    });
    content = (!content) ? "<p>Você está aqui!</p>" : content;
    this.addInfoWindow(marker, content);
  }

}



#################  HTML ##################

<ion-header>
  <ion-navbar>
    <ion-title>
      Como chegar
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card>
    <ion-card-content>
      <div #directionsPanel></div>
    </ion-card-content>
  </ion-card>

  <div #map id="map"></div>
</ion-content>

##################### CSS #####################

.ios, .md {
  page-clinica-mapa {
    #floating-panel {
      position: absolute;
      top: 5px;
      right: 0;
      z-index: 5;
      background-color: #fff;
      padding: 2px;
      border: 1px solid #999;
      text-align: center;
      font-family: 'Roboto','sans-serif';
      line-height: 30px;
      padding-left: 10px;
    }
    .adp-legal,
    .adp-placemark,
    .adp-mark {
      display: none;
    }

    .scroll {
      height: 100%
    }
    .card-ios {
      margin: -15px;
      width: 100%;
      padding: 0;
    }
    .card-md {
      margin: -15px;
      width: 100%;
      padding: 0;
    }

    #map {
      width: 100%;
      height: 100%;
      top: 45px;
    }

    ion-card {
      max-height: 200px;
      overflow: scroll;
      position: absolute;
      z-index: 1;
    }
  }
}