Agm-Direction

Agm-Direction is the directive for @agm/core

• Angular 2+
• Google Map API

Install

• you must install @agm/core

  npm install --save @agm/core

• install agm-direction

  npm install --save agm-direction

Import

• @agm/core
• agm-direction

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { AgmCoreModule } from '@agm/core'; 
import { AgmDirectionModule } from 'agm-direction';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AgmCoreModule.forRoot({ // @agm/core
      apiKey: 'your key',
    }),
    AgmDirectionModule      // agm-direction
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Use

• HTML

<agm-map [latitude]="lat" [longitude]="lng">

  <agm-direction *ngIf="dir" [origin]="dir.origin" [destination]="dir.destination"></agm-direction>

</agm-map>

<button type="button" (click)="getDirection()">Get</button>

• CSS

agm-map {
    height: 400px;
}

• TS

  lat: Number = 24.799448;
  lng: Number = 120.979021;
  zoom: Number = 14;

  dir = undefined;

  public getDirection() {
    this.dir = {
      origin: { lat: 24.799448, lng: 120.979021 },
      destination: { lat: 24.799524, lng: 120.975017 }
    }
  }

Attribute

• origin: { lat, lng };
• destination: { lat, lng };
• waypoints: object = [];
• travelMode: string = 'DRIVING';
• optimizeWaypoints: boolean = true;
• visible: boolean = true;
• panel: object = undefined;

Remove Direction

• You can set [visible]=false .

Show Panel Direction

Displaying text directions with setPanel()

• HTML

<agm-direction [panel]="myPanel"></agm-direction>
<div #myPanel></div>

Or you can use function:

• HTML

<agm-direction [panel]="setPanel()"></agm-direction>
<div id="myPanel"></div>

• TS

function setPanel(){
   return document.querySelector('#myPanel'); 
}

Warning

The mission file seems to be part of a third. TS files...

• tsconfig.app.json

{
  
  // extends, compilerOptions ...

  "include": [
    "../src/*",
    "../node_modules/agm-direction/*"
  ],
}  

is not part of the compilation output. Please check...

You can use --aot to fix this error：

ng serve --aot

Or following the Angular issues：

• is not part of the compilation output, angular 5

• Angular v5.0.0 is not part of the compilation output. Please check the other error messages for details.