map fixes

package-lock.json

@@ -604,8 +604,7 @@
             "minimist": {
               "version": "0.0.8",
               "bundled": true,
-              "dev": true,
-              "optional": true
+              "dev": true
             },
             "minipass": {
               "version": "2.3.5",
@@ -630,7 +629,6 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -1724,6 +1722,11 @@
         "humanize-ms": "^1.2.1"
       }
     },
+    "agm-direction": {
+      "version": "0.7.8",
+      "resolved": "https://registry.npmjs.org/agm-direction/-/agm-direction-0.7.8.tgz",
+      "integrity": "sha512-ciEH6K1yxqMD0oD8mpLPUOjv2m+CZ7CMW+a2reJ2wDQwvKXyeanDjHEopg/1VhO2EwBhS4FPcfBOdpnHiVXYXw=="
+    },
     "ajv": {
       "version": "6.10.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.0.tgz",

package.json

@@ -28,6 +28,7 @@
         "@ionic-native/splash-screen": "^5.0.0",
         "@ionic-native/status-bar": "^5.12.0",
         "@ionic/angular": "^4.7.1",
+        "agm-direction": "^0.7.8",
         "cordova-android": "7.1.4",
         "cordova-plugin-device": "^2.0.2",
         "cordova-plugin-geolocation": "4.0.2",

src/app/trackorder/trackorder.module.ts

@@ -7,6 +7,7 @@ import { IonicModule } from '@ionic/angular';
 
 import { TrackorderPage } from './trackorder.page';
 import { AgmCoreModule } from '@agm/core';
+import { AgmDirectionModule } from 'agm-direction';
 
 const routes: Routes = [
   {
@@ -20,6 +21,7 @@ const routes: Routes = [
     CommonModule,
     FormsModule,
     IonicModule,
+    AgmDirectionModule,
     AgmCoreModule.forRoot({
       apiKey: 'AIzaSyAK3Av2e2dunqInYEaAVJPmzK5HTi0gubw'
     }),

src/app/trackorder/trackorder.page.html

@@ -9,8 +9,9 @@
 </div>
 <ion-content>
     <div class="trackorder_div">
-        <agm-map [zoom]="18" [latitude]=" lat " [longitude]="lng " [backgroundColor]="444397">
-            <agm-marker [latitude]="lat " [longitude]="lng "></agm-marker>
+        <agm-map [zoom]="20" [latitude]="lat" [longitude]="lng">
+            <agm-direction [origin]="origin" [destination]="destination" [renderOptions]="renderOptions" [markerOptions]="markerOptions">
+            </agm-direction>
         </agm-map>
         <!-- <div class="overlay">
 

src/app/trackorder/trackorder.page.ts

@@ -13,10 +13,14 @@ declare var google;
 export class TrackorderPage implements OnInit {
 
   map: any;
-  address: string;
+  address: string
 
-  lat: number = 51.678418;
-  lng: number = 7.809007;
+  public lat: number = 51.678418;
+  public lng: number = 7.809007;
+  public origin: any;
+  public destination: any;
+  public renderOptions: any;
+  public markerOptions: any;
 
   constructor(
     private router: Router,
@@ -26,7 +30,7 @@ export class TrackorderPage implements OnInit {
 
   
   ngOnInit() {
-  
+    this.getDirection();
   }
 
   goToPage(path, data = null) {
@@ -41,4 +45,18 @@ export class TrackorderPage implements OnInit {
 
 
 
+  getDirection() {
+    this.origin = { lat: 51.678418, lng: 7.809007 };
+    this.destination = { lat: 51.678418, lng: 7.81900 };
+    this.renderOptions = { polylineOptions: { strokeColor: 'rgba(69, 67, 152,1)' }, suppressMarkers: true };
+    this.markerOptions = {
+      origin: {
+        icon: './assets/source.png',
+      },
+      destination: {
+        icon: './assets/destination.png',
+      }
+    };
+  }
+
 }