#579 map directions are done

Spore/front/src/app/app.module.ts

@@ -29,7 +29,7 @@ import { CookieService } from 'angular2-cookie';
 import { CoursesPageComponent } from './components/courses-page/courses-page.component';
 import { CustomColourPickerComponent } from './components/colour-picker/colour-picker.component';
 import { MapPageComponent } from './components/map-page/map-page.component';
-import { AgmCoreModule } from 'angular2-google-maps/core';
+import { AgmCoreModule, GoogleMapsAPIWrapper } from 'angular2-google-maps/core';
 import { GMapsService, DirectionsMapDirective } from '../meta/googleMapService';
 import { TasksComponent } from './components/tasks/tasks.component';
 
@@ -107,7 +107,8 @@ type StoreType = {
     DatabaseService,
     NavService,
     UserService,
-    GMapsService
+    GMapsService,
+    GoogleMapsAPIWrapper
   ]
 })
 export class AppModule {

Spore/front/src/app/components/map-page/map-page.component.html

@@ -22,7 +22,8 @@
         </sebm-google-map-marker>
       </div>
       <sebm-google-map-marker [latitude]="pointsOfInterest[0].lat" [longitude]="pointsOfInterest[0].lng"></sebm-google-map-marker>
-      <sebm-google-map-directions [origin]="origin" [destination]="destination"></sebm-google-map-directions>
+      <sebm-google-map-directions *ngIf="destination" [origin]="{'lat': pointsOfInterest[0].lat, 'lng': pointsOfInterest[0].lng}"
+        [destination]="destination"></sebm-google-map-directions>
     </sebm-google-map>
   </div>
 

Spore/front/src/app/components/map-page/map-page.component.ts

@@ -1,6 +1,6 @@
-import { Component, NgZone, OnDestroy } from '@angular/core';
+import { Component, NgZone, OnDestroy, } from '@angular/core';
 import { FormControl } from "@angular/forms";
-import { GMapsService } from '../../../meta/googleMapService';
+import { GMapsService, DirectionsMapDirective } from '../../../meta/googleMapService';
 import 'rxjs/add/operator/takeUntil';
 import { Subject } from 'rxjs/Subject';
 declare var google;
@@ -24,9 +24,8 @@ export class MapPageComponent implements OnDestroy {
   private lat: number = undefined;
   private lng: number = undefined;
   private ngUnsubscribe: Subject<void> = new Subject<void>();
-
-  private origin = { longitude: 4.333, lattitude: -1.2222 };  // its a example aleatory position
-  private destination = { longitude: 22.311, lattitude: -0.123 };  // its a example aleatory position
+  private destination: any;
+  private directionsDisplay: any;
 
   constructor(
     private googleMapService: GMapsService,
@@ -102,6 +101,7 @@ export class MapPageComponent implements OnDestroy {
     this.parsedPointOfInterest = "";
     this.lat = undefined;
     this.lng = undefined;
+    this.destination = { lat: null, lng: null };
     this.searchResults = false;
     while (this.pointsOfInterest.length > 1) {
       this.pointsOfInterest.pop();
@@ -126,5 +126,6 @@ export class MapPageComponent implements OnDestroy {
   private focusMarker(place: any): void {
     this.lat = place.lat;
     this.lng = place.lng;
+    this.destination = { lat: place.lat, lng: place.lng };
   }
 }

Spore/front/src/meta/googleMapService.ts

@@ -1,20 +1,22 @@
-import { Injectable, NgZone, Directive, Input, OnInit } from '@angular/core';
-import { GoogleMapsAPIWrapper } from 'angular2-google-maps/core';
-import { MapsAPILoader } from 'angular2-google-maps/core';
+import { Injectable, NgZone, Directive, Input, OnChanges } from '@angular/core';
+import { GoogleMapsAPIWrapper, MapsAPILoader } from 'angular2-google-maps/core';
 import { Observable, Observer } from 'rxjs';
 import { Subject } from 'rxjs/Subject';
 declare var google;
 
 @Injectable()
 export class GMapsService extends GoogleMapsAPIWrapper {
 
-    constructor(private loader: MapsAPILoader, private zone: NgZone) {
+    constructor(
+      private loader: MapsAPILoader,
+      private zone: NgZone
+    ) {
       super(loader, zone);
     }
 
     // Gets bunch of places around location. (Doesnt seem to matter much
     // what place you specify - better to use getTextSearch)
-    public getPointsOfInterest(lat: number, lng: number, place: string) {
+    public getPointsOfInterest(lat: number, lng: number, place: string): any {
       let map = new google.maps.Map(document.getElementById('map'), {
         center: new google.maps.LatLng(lat, lng),
         zoom: 15
@@ -41,7 +43,7 @@ export class GMapsService extends GoogleMapsAPIWrapper {
 
     // Good search if you have an address and point of interest in mind.
     // i.e Food near Square One Mississauga
-    public getTextSearch(lat: number, lng: number, address: string, place: string) {
+    public getTextSearch(lat: number, lng: number, address: string, place: string): any {
       let map = new google.maps.Map(document.getElementById('map'), {
         center: new google.maps.LatLng(lat, lng),
         zoom: 15
@@ -67,7 +69,7 @@ export class GMapsService extends GoogleMapsAPIWrapper {
     }
 
     // Using placeId you can get extra details about that place.
-    public getPlaceDetails(lat: number, lng: number, placeId: string) {
+    public getPlaceDetails(lat: number, lng: number, placeId: string): any {
       let map = new google.maps.Map(document.getElementById('map'), {
         center: new google.maps.LatLng(lat, lng),
         zoom: 15
@@ -88,7 +90,7 @@ export class GMapsService extends GoogleMapsAPIWrapper {
       });
     }
 
-    public getLatLan(address: string) {
+    public getLatLan(address: string): any {
       let geocoder = new google.maps.Geocoder();
       return Observable.create(observer => {
         geocoder.geocode({'address': address}, function(results, status) {
@@ -103,7 +105,7 @@ export class GMapsService extends GoogleMapsAPIWrapper {
       });
     }
 
-    public geolocate() {
+    public geolocate(): any {
       return Observable.create(observer => {
         if (!navigator.geolocation) {
           observer.error('Geolocation is not supported by your browser.');
@@ -129,31 +131,52 @@ export class GMapsService extends GoogleMapsAPIWrapper {
 @Directive({
   selector: 'sebm-google-map-directions'
 })
-export class DirectionsMapDirective implements OnInit {
+export class DirectionsMapDirective {
+
+  private directionsDisplay: any;
 
   @Input()
-  origin;
+  public origin: any;
 
   @Input()
-  destination;
+  public destination: any;
 
   constructor (
-    private gmapsApi: GoogleMapsAPIWrapper
+    private gmapsApi: GoogleMapsAPIWrapper,
   ) {}
 
-  public ngOnInit() {
-    var x = this.origin;
+  public ngOnChanges() {
     this.gmapsApi.getNativeMap().then(map => {
+      if (!this.origin || !this.destination) {
+        return;
+      }
+
+      var me = this;
       var directionsService = new google.maps.DirectionsService;
-      var directionsDisplay = new google.maps.DirectionsRenderer;
-      directionsDisplay.setMap(map);
+      if (me.directionsDisplay) {
+        me.directionsDisplay.setMap(null);
+      }
+
+      if (!this.destination.lat || !this.destination.lng) {
+        me.directionsDisplay = new google.maps.DirectionsRenderer({
+          suppressMarkers: true,
+          suppressPolylines: true
+        });
+        me.directionsDisplay.setMap(map);
+        return;
+      }
+
+      me.directionsDisplay = new google.maps.DirectionsRenderer({
+        suppressMarkers: true
+      });
+      me.directionsDisplay.setMap(map);
       directionsService.route({
-          origin: 'Toronto ON',
-          destination: 'Oakville ON',
-          travelMode: 'DRIVING'
+          origin: {lat: this.origin.lat, lng: this.origin.lng},
+          destination: {lat: this.destination.lat, lng: this.destination.lng},
+          travelMode: google.maps.DirectionsTravelMode.DRIVING
         }, function(response, status) {
           if (status === 'OK') {
-            directionsDisplay.setDirections(response);
+            me.directionsDisplay.setDirections(response);
           } else {
             console.log('Directions request failed due to ' + status);
           }