⚠️ DEPRECATION NOTICE: This repository is no longer maintained.

This project has been officially archived and will no longer receive updates, bug fixes, or feature additions. We will not be reviewing new issues or pull requests.

A huge thank you to all the contributors and developers who have supported, used, and helped maintain this project over the years. Your efforts and contributions are deeply appreciated!

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

  bashCopy
  npm install --save @agm/core agm-direction

• Use yarn

  bashCopy
  yarn add @agm/core agm-direction

Importing Modules

typescriptCopy
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

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

CSS

cssCopy
agm-map {
    height: 400px;
}

TS

typescriptCopy
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

bashCopy
git clone https://github.com/explooosion/Agm-Direction.git

bashCopy
npm install

bashCopy
npm run build

bashCopy
npm run pack:lib

bashCopy
cd playground && npm install

bashCopy
# Add gmap api key in environment.ts

bashCopy
npm start

Generator

This library generated by angular-library-starter.

License

MIT