How add my geolocation as origin in angular2 - ionic2

Question

the code is found ok, only need help to add my geolocation as origin, some one can helpme ?the base of my code
this is my component.ts or my contact.ts from ionic2
import { Component, NgModule,NgZone,OnInit,ViewChild,ElementRef,Directive,Input } from '#angular/core';
import {FormControl, FormsModule, ReactiveFormsModule}from'#angular/forms';
import {BrowserModule} from '#angular/platform-browser';
import { Geolocation} from '#ionic-native/geolocation';
import { DirectionsMapDirective} from '../../mapD/DirectionsMap.directive';
import {AgmCoreModule,MapsAPILoader, GoogleMapsAPIWrapper} from '#agm/core';
import {} from '#types/googlemaps';
declare var google: any;
declare var jQuery: any;
#Component({
selector: 'page-contact',
templateUrl: 'contact.html',
providers:[GoogleMapsAPIWrapper]
})
export class ContactPage implements OnInit{
public latitude: number;
public longitude: number;
public destinationInput: FormControl;
public destinationOutput: FormControl;
public zoom: number;
public iconurl: string;
public mapCustomStyles : any;
public estimatedTime: any;
public estimatedDistance: any;
#ViewChild("pickupInput")
public pickupInputElementRef: ElementRef;
#ViewChild("pickupOutput")
public pickupOutputElementRef: ElementRef;
#ViewChild("scrollMe")
private scrollContainer: ElementRef;
#ViewChild(DirectionsMapDirective) vc: DirectionsMapDirective;
public origin :any ; // its a example aleatory position
public destination : any; // its a example aleatory position
constructor(
private mapsAPILoader: MapsAPILoader,
private ngZone: NgZone,
private gmapsApi: GoogleMapsAPIWrapper,
private _elementRef : ElementRef
) {
}
ngOnInit() {
//set google maps defaults
this.zoom = 4;
this.latitude = 39.8282;
this.longitude = -98.5795;
//this.iconurl = '../image/map-icon.png';
this.iconurl = '../image/map-icon.png';
// this.mapCustomStyles = this.getMapCusotmStyles();
//create search FormControl
this.destinationInput = new FormControl();
this.destinationOutput = new FormControl();
console.log(this.destinationInput)
console.log(this.destinationOutput)
//set current position
this.setCurrentPosition();
//load Places Autocomplete
this.mapsAPILoader.load().then(() => {
let autocompleteInput = new google.maps.places.Autocomplete(this.pickupInputElementRef.nativeElement, {
types: ["address"]
});
let autocompleteOutput = new google.maps.places.Autocomplete(this.pickupOutputElementRef.nativeElement, {
types: ["address"]
});
this.setupPlaceChangedListener(autocompleteInput, 'ORG');
this.setupPlaceChangedListener(autocompleteOutput, 'DES');
});
}
private setupPlaceChangedListener(autocomplete: any, mode: any ) {
autocomplete.addListener("place_changed", () => {
this.ngZone.run(() => {
//get the place result
let place: google.maps.places.PlaceResult = autocomplete.getPlace();
//verify result
if (place.geometry === undefined) {
return;
}
if (mode === 'ORG') {
this.vc.origin = { longitude: place.geometry.location.lng(), latitude: place.geometry.location.lat() };
this.vc.originPlaceId = place.place_id;
} else {
this.vc.destination = { longitude: place.geometry.location.lng(), latitude: place.geometry.location.lat() }; // its a example aleatory position
this.vc.destinationPlaceId = place.place_id;
}
if(this.vc.directionsDisplay === undefined){ this.mapsAPILoader.load().then(() => {
this.vc.directionsDisplay = new google.maps.DirectionsRenderer;
});
}
console.log(this.vc.originPlaceId);
//Update the directions
this.vc.updateDirections();
this.zoom = 12;
});
});
}
getDistanceAndDuration(){
this.estimatedTime = this.vc.estimatedTime;
this.estimatedDistance = this.vc.estimatedDistance;
}
scrollToBottom(): void {
jQuery('html, body').animate({ scrollTop: jQuery(document).height() }, 3000);
}
private setPickUpLocation( place:any ) {
//verify result
if (place.geometry === undefined || place.geometry === null) {
return;
}
//set latitude, longitude and zoom
this.latitude = place.geometry.location.lat();
this.longitude = place.geometry.location.lng();
this.zoom = 40;
}
private setCurrentPosition() {
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition((position) => {
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
this.zoom = 12;
});
}
}
private getMapCusotmStyles() {
// Write your Google Map Custom Style Code Here.
}
}
this is the directive in ionic 2
import { Directive, Input, Output } from '#angular/core';
import { GoogleMapsAPIWrapper} from'#agm/core';
declare var google: any;
#Directive({selector:'agm-map-directions'})
export class DirectionsMapDirective{
#Input() origin:any ;
#Input() destination:any;
#Input() originPlaceId:any;
#Input() destinationPlaceId:any;
#Input() waypoints:any;
#Input() directionsDisplay:any;
#Input() estimatedTime : any;
#Input() estimatedDistance : any;
constructor (private gmapsApi: GoogleMapsAPIWrapper) {}
updateDirections(){
this.gmapsApi.getNativeMap().then(map => {
if(!this.originPlaceId || !this.destinationPlaceId
){
return;
}
console.log(this.originPlaceId);
var directionsService = new google.maps.DirectionsService;
var me = this;
var latLngA = new google.maps.LatLng({lat: this.origin.latitude, lng: this.origin.longitude });
var latLngB = new google.maps.LatLng({lat: this.destination.latitude, lng: this.destination.longitude });
this.directionsDisplay.setMap(map);
this.directionsDisplay.setOptions({
polylineOptions: {
strokeWeight: 8,
strokeOpacity: 0.7,
strokeColor: '#00468c'
}
});
this.directionsDisplay.setDirections({routes: []});
directionsService.route({
origin: {placeId : this.originPlaceId },
destination: {placeId : this.destinationPlaceId },
avoidHighways: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
//travelMode: 'DRIVING'
}, function(response: any, status: any) {
if (status === 'OK') {
me.directionsDisplay.setDirections(response);
map.setZoom(30);
//console.log(me.getcomputeDistance (latLngA, latLngB));
var point = response.routes[ 0 ].legs[ 0 ];
me.estimatedTime = point.duration.text ;
me.estimatedDistance = point.distance.text;
console.log(me.estimatedTime);
console.log( 'Estimated travel time: ' + point.duration.text + ' (' + point.distance.text + ')' );
} else {
console.log('Directions request failed due to ' + status);
}
});
});
}
private getcomputeDistance(latLngA: any , latLngB: any )
{
return (google.maps.geometry.spherical.computeDistanceBetween(latLngA, latLngB) / 1000).toFixed(2);
}
}
this is html
<ion-header>
<ion-navbar>
<ion-title>
mapa
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<agm-map [latitude]="lat" [longitude]="lng" [scrollwheel]="false"
[zoom]="zoom" [styles]="mapCustomStyles">
<agm-marker [latitude]="lat" [longitude]="lng" [iconUrl]="iconurl">
<agm-info-window>
<strong>InfoWindow content</strong>
</agm-info-window>
</agm-marker>
<agm-map-directions [origin]="origin" [destination]="destination"></agm-map-directions>
</agm-map>
<br>
<br>
<br>
<br>
<br>
<div class="form-group">
<input placeholder="Enter source location" autocorrect="off" autocapitalize="off" spellcheck="off"
type="text" class="form-control" #pickupInput [formControl]="destinationInput">
<input placeholder="Enter destination" autocorrect="off" autocapitalize="off" spellcheck="off"
type="text" class="form-control" #pickupOutput [formControl]="destinationOutput">
</div>
</ion-content>
my code is from http://www.17educations.com/angularjs-2/google-map-directions-display-angular-2/