Awesome Open Source
Awesome Open Source

Agm-Direction

npm version npm peerDependencies Status Build Status GitHub license PRs Welcome

Agm-Direction is the directive for @agm/core (not official)

  • Angular
  • Google Map API

How to use?
👉 Start Reading 👉 Build With Ionic

Agm-Direction

Credit

SebastianM/angular-google-maps - Directions service #495

Installation

Installation is done using the npm install command:

  • Use npm

    npm install --save @agm/core agm-direction
    
  • Use yarn

    yarn add @agm/core agm-direction
    

Importing Modules

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

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

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

Usage

HTML

<agm-map [latitude]="lat" [longitude]="lng">
  <agm-direction 
    [origin]="origin" 
    [destination]="destination"
  >
  </agm-direction>
</agm-map>

CSS

agm-map {
    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';
}

Document

Development

👉 Playground Project

git clone https://github.com/explooosion/Agm-Direction.git
npm install
npm run build
npm run pack:lib
cd playground && npm install
# Add gmap api key in environment.ts
npm start

Generator

This library generated by angular-library-starter.

License

MIT


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (251,605
Angular (12,625
Map (3,562
Google Maps (1,182
Angular6 (767
Directive (288
Related Projects