@grupo-san-cristobal/agm-direction

This is a fork from the original Agm-Direction project from explooosion

We have published the package under our organization since we needed support for most current Angular versions.

We will be maintaining this package in order to provide compatibility with newer Angular versions

We are not planning on adding new features to this package, and we plan to get back to the original agm-direction as soon the maintenance is reestablished on the original package

Agm-Direction

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

• Angular
• Google Map API

How to use?
👉 Start Reading 👉 Build With Ionic

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

• Document Agm-Direction-Docs
• Less useful AgmDirectionModule

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