@ng-maps/direction is the directive for @ng-maps/core
Installation is done using the
npm install
command:
npm install @ng-maps/direction
# or
yarn add @ng-maps/direction
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgMapsCoreModule } from '@ng-maps/core';
import { NgMapsGoogleModule } from '@ng-maps/google';
import { NgMapsDirectionModule } from '@ng-maps/direction';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
NgMapsCoreModule, //@ng-maps/core
NgMapsGoogleModule, //@ng-maps/google
NgMapsDirectionModule, //@ng-maps/direction
],
providers: [
{
provide: GOOGLE_MAPS_API_CONFIG,
useValue: {
apiKey: 'YOUR_API_KEY',
},
},
],
bootstrap: [AppComponent],
})
export class AppModule {}
HTML
<map-view [latitude]="lat" [longitude]="lng">
<map-direction [origin]="origin" [destination]="destination"> </map-direction>
</map-view>
CSS
map-view {
height: 400px;
}
TS
public lat = 24.799448;
public lng = 120.979021;
public origin: any;
public destination: any;
ngOnInit() {
this.getDirection();
}
getDirection() {
this.origin = { lat: 24.799448, lng: 120.979021 };
this.destination = { lat: 24.799524, lng: 120.975017 };
// Location within a string
// this.origin = 'Taipei Main Station';
// this.destination = 'Taiwan Presidential Office';
}