docs/index.html

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>agm-direction documentation</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="icon" type="image/x-icon" href="./images/favicon.ico">
	      <link rel="stylesheet" href="./styles/style.css">
    </head>
    <body>

        <div class="navbar navbar-default navbar-fixed-top visible-xs">
            <a href="./" class="navbar-brand">agm-direction documentation</a>
            <button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
        </div>

        <div class="xs-menu menu" id="mobile-menu">
                <div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search">
</div>
            <compodoc-menu></compodoc-menu>
        </div>

        <div class="container-fluid main">
           <div class="row main">
               <div class="hidden-xs menu">
                   <compodoc-menu mode="normal"></compodoc-menu>
               </div>
               <!-- START CONTENT -->
               <div class="content getting-started">
                   <div class="content-data">

<h1 id="agm-direction">Agm-Direction</h1>
<p><a href="https://badge.fury.io/js/agm-direction"><img src="https://badge.fury.io/js/agm-direction.svg" alt="npm version" class="img-responsive"></a>
<a href="https://github.com/explooosion/Agm-Direction"><img src="https://img.shields.io/npm/dm/localeval.svg" alt="npm" class="img-responsive"></a>
<a href="https://david-dm.org/explooosion/Agm-Direction"><img src="https://david-dm.org/explooosion/Agm-Direction.svg?theme=shields.io" alt="Dependency Status" class="img-responsive"></a>
<a href="https://travis-ci.org/explooosion/Agm-Direction"><img src="https://travis-ci.org/explooosion/Agm-Direction.svg?branch=master" alt="Build Status" class="img-responsive"></a>
<a href="https://github.com/explooosion/Agm-Direction"><img src="https://img.shields.io/github/license/explooosion/Agm-Direction.svg" alt="GitHub license" class="img-responsive"></a>
<a href="http://makeapullrequest.com"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs Welcome" class="img-responsive"></a></p>
<p><a href="https://github.com/explooosion/Agm-Direction">Agm-Direction</a> is the directive for <a href="https://github.com/SebastianM/angular-google-maps">@agm/core</a> (not official)</p>
<ul>
<li>Angular 2~7</li>
<li>Google Map API</li>
<li><a href="https://stackblitz.com/edit/agm-direction-demo">Playground</a>  </li>
</ul>
<p>How to use?<br>👉 <a href="https://robby570.tw/Agm-Direction-Docs/">Start Reading</a></p>
<p><img src="https://i.imgur.com/DCIoXqS.jpg" alt="Agm-Direction" class="img-responsive"></p>
<h2 id="installation">Installation</h2>
<p>Installation is done using the
<a href="https://docs.npmjs.com/getting-started/installing-npm-packages-locally"><code>npm install</code> command</a>:</p>
<ul>
<li><p>Use npm</p>
<div><pre class="line-numbers"><code class="language-bash">npm install --save &#64;agm/core
npm install --save agm-direction</code></pre></div></li>
<li><p>Use yarn</p>
<div><pre class="line-numbers"><code class="language-bash">yarn add &#64;agm/core
yarn add agm-direction</code></pre></div></li>
</ul>
<h2 id="importing-modules">Importing Modules</h2>
<div><pre class="line-numbers"><code class="language-typescript">import { BrowserModule } from &#39;&#64;angular/platform-browser&#39;
import { NgModule } from &#39;&#64;angular/core&#39;
import { AppComponent } from &#39;./app.component&#39;

import { AgmCoreModule } from &#39;&#64;agm/core&#39;            // &#64;agm/core
import { AgmDirectionModule } from &#39;agm-direction&#39;   // agm-direction

&#64;NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AgmCoreModule.forRoot({ // &#64;agm/core
      apiKey: &#39;your key&#39;,
    }),
    AgmDirectionModule,     // agm-direction
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }</code></pre></div><h2 id="usage">Usage</h2>
<p>HTML</p>
<div><pre class="line-numbers"><code class="language-html">&lt;agm-map [latitude]=&quot;lat&quot; [longitude]=&quot;lng&quot;&gt;
  &lt;agm-direction [origin]=&quot;origin&quot; [destination]=&quot;destination&quot;&gt;
  &lt;/agm-direction&gt;
&lt;/agm-map&gt;</code></pre></div><p>CSS</p>
<div><pre class="line-numbers"><code class="language-css">agm-map {
    height: 400px;
}</code></pre></div><p>TS</p>
<div><pre class="line-numbers"><code class="language-typescript">public lat: Number = 24.799448
public lng: Number = 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 }

  // this.origin = &#39;Taipei Main Station&#39;
  // this.destination = &#39;Taiwan Presidential Office&#39;
}</code></pre></div><h2 id="document">Document</h2>
<ul>
<li>Document <a href="https://robby570.tw/Agm-Direction-Docs/">Agm-Direction-Docs</a></li>
<li>Less useful <a href="https://robby570.tw/Agm-Direction/">AgmDirectionModule</a></li>
</ul>
<h2 id="development">Development</h2>
<p>👉 <a href="https://github.com/explooosion/Agm-Direction/tree/master/playground">Playground</a></p>
<div><pre class="line-numbers"><code class="language-bash">git clone https://github.com/explooosion/Agm-Direction.git</code></pre></div><div><pre class="line-numbers"><code class="language-bash">cd playground</code></pre></div><div><pre class="line-numbers"><code class="language-bash">yarn start</code></pre></div><h2 id="generator">Generator</h2>
<p>This library generated by <a href="https://github.com/robisim74/angular-library-starter">angular-library-starter</a>.</p>
<h2 id="license">License</h2>
<p><a href="http://opensource.org/licenses/MIT">MIT</a></p>


                   </div><div class="search-results">
    <div class="has-results">
        <h1 class="search-results-title"><span class='search-results-count'></span> result-matching "<span class='search-query'></span>"</h1>
        <ul class="search-results-list"></ul>
    </div>
    <div class="no-results">
        <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
    </div>
</div>
</div>
               <!-- END CONTENT -->
           </div>
       </div>

       <script>
            var COMPODOC_CURRENT_PAGE_DEPTH = 0;
            var COMPODOC_CURRENT_PAGE_CONTEXT = 'getting-started';
            var COMPODOC_CURRENT_PAGE_URL = 'index.html';
       </script>

       <script src="./js/libs/custom-elements.min.js"></script>
       <script src="./js/libs/lit-html.js"></script>
       <script src="./js/menu-wc.js"></script>

       <script src="./js/libs/bootstrap-native.js"></script>

       <script src="./js/libs/es6-shim.min.js"></script>
       <script src="./js/libs/EventDispatcher.js"></script>
       <script src="./js/libs/promise.min.js"></script>
       <script src="./js/libs/zepto.min.js"></script>

       <script src="./js/compodoc.js"></script>

       <script src="./js/tabs.js"></script>
       <script src="./js/menu.js"></script>
       <script src="./js/libs/clipboard.min.js"></script>
       <script src="./js/libs/prism.js"></script>
       <script src="./js/sourceCode.js"></script>
          <script src="./js/search/search.js"></script>
          <script src="./js/search/lunr.min.js"></script>
          <script src="./js/search/search-lunr.js"></script>
          <script src="./js/search/search_index.js"></script>
       <script src="./js/lazy-load-graphs.js"></script>


    </body>
</html>