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: 5 days 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 7 years ago)
• Default Branch: master
• Last Pushed: 2024-05-07T22:39:34.000Z (8 months ago)
• Last Synced: 2024-12-08T18:34:24.548Z (14 days 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: 5
• Forks: 26
• 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

[![npm version](https://badge.fury.io/js/agm-direction.svg)](https://badge.fury.io/js/agm-direction)

[![npm](https://img.shields.io/npm/dm/localeval.svg)](https://github.com/explooosion/Agm-Direction)

[![Build Status](https://travis-ci.org/explooosion/Agm-Direction.svg?branch=master)](https://travis-ci.org/explooosion/Agm-Direction)

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](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)

![Agm-Direction](https://i.imgur.com/DCIoXqS.jpg)

## 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)