https://github.com/explooosion/agm-direction
This is the directive for @agm/core (not official)
https://github.com/explooosion/agm-direction
agm angular angular6 direction directions directive gmaps gmaps-api googlemaps map
Last synced: 10 months ago
JSON representation
This is the directive for @agm/core (not official)
- Host: GitHub
- URL: https://github.com/explooosion/agm-direction
- Owner: explooosion
- License: mit
- Created: 2017-11-26T17:42:38.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2024-05-07T22:39:34.000Z (over 1 year ago)
- Last Synced: 2025-03-31T09:05:23.267Z (10 months ago)
- Topics: agm, angular, angular6, direction, directions, directive, gmaps, gmaps-api, googlemaps, map
- Language: TypeScript
- Homepage: https://robby570.tw/Agm-Direction-Docs/
- Size: 3.32 MB
- Stars: 75
- Watchers: 4
- Forks: 28
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Agm-Direction
[](https://badge.fury.io/js/agm-direction)
[](https://github.com/explooosion/Agm-Direction)
[](https://travis-ci.org/explooosion/Agm-Direction)
[](http://makeapullrequest.com)
[Agm-Direction](https://github.com/explooosion/Agm-Direction) is the directive for [@agm/core](https://github.com/SebastianM/angular-google-maps) (not official)
- Angular
- Google Map API
How to use?
👉 [Start Reading](https://robby570.tw/Agm-Direction-Docs/)
👉 [Build With Ionic](https://github.com/explooosion/ionic-agm-direction-example)
## Credit
#### [SebastianM/angular-google-maps](https://github.com/SebastianM/angular-google-maps) - [Directions service #495](https://github.com/SebastianM/angular-google-maps/issues/495)
## Installation
Installation is done using the
[`npm install` command](https://docs.npmjs.com/getting-started/installing-npm-packages-locally):
- Use npm
```bash
npm install --save @agm/core agm-direction
```
- Use yarn
```bash
yarn add @agm/core agm-direction
```
## Importing Modules
```typescript
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
```html
```
CSS
```css
agm-map {
height: 400px;
}
```
TS
```typescript
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](https://robby570.tw/Agm-Direction-Docs/)
- Less useful [AgmDirectionModule](https://robby570.tw/Agm-Direction/)
## Development
👉 [Playground Project](https://github.com/explooosion/Agm-Direction/tree/master/playground)
```bash
git clone https://github.com/explooosion/Agm-Direction.git
```
```bash
npm install
```
```bash
npm run build
```
```bash
npm run pack:lib
```
```bash
cd playground && npm install
```
```bash
# Add gmap api key in environment.ts
```
```bash
npm start
```
## Generator
This library generated by [angular-library-starter](https://github.com/robisim74/angular-library-starter).
## License
[MIT](http://opensource.org/licenses/MIT)