All Projects → explooosion → Agm Direction

explooosion / Agm Direction

Licence: other
This is the directive for @agm/core (not official)

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Agm Direction

Ngx Daterangepicker Material
Pure Angular 2+ date range picker with material design theme, a demo here:
Stars: ✭ 169 (+119.48%)
Mutual labels:  directive, angular6
angular-mapboxgl-directive
AngularJS directive for Mapbox GL
Stars: ✭ 43 (-44.16%)
Mutual labels:  map, directive
school-finder
👀 Find schools by location
Stars: ✭ 16 (-79.22%)
Mutual labels:  map, googlemaps
Flask Googlemaps
Easy way to add GoogleMaps to Flask applications. maintainer: @RiverFount
Stars: ✭ 550 (+614.29%)
Mutual labels:  googlemaps, map
ngx-konami
A simple directive to add easter eggs in your Angular application 👾
Stars: ✭ 34 (-55.84%)
Mutual labels:  directive, angular6
Googlemapview
android google map view - imageView to make the map display process easier by entering latitude and longitude only by static map
Stars: ✭ 36 (-53.25%)
Mutual labels:  googlemaps, map
Mpk Ttss
Improved www.ttss.krakow.pl
Stars: ✭ 63 (-18.18%)
Mutual labels:  map
Leaflet.labeltextcollision
Leaflet.LabelTextCollision is a LeafletJS plug-in to display labels on vector data while avoiding label collisions.
Stars: ✭ 65 (-15.58%)
Mutual labels:  map
React Qmap
💡react腾讯地图开源组件
Stars: ✭ 60 (-22.08%)
Mutual labels:  map
Indoorjs
Indoor mapping for floorplans using on fabricjs
Stars: ✭ 59 (-23.38%)
Mutual labels:  map
Ngx Summernote
Summernote editor for Angular 😎
Stars: ✭ 76 (-1.3%)
Mutual labels:  angular6
Map
PHP Map package for easy and elegant handling of PHP arrays as array-like map objects
Stars: ✭ 1,180 (+1432.47%)
Mutual labels:  map
Easymap
Ready to use Address Selection Library using Google Maps and Places API.
Stars: ✭ 66 (-14.29%)
Mutual labels:  googlemaps
Buckets Js
A complete, fully tested and documented data structure library written in pure JavaScript.
Stars: ✭ 1,128 (+1364.94%)
Mutual labels:  map
Exploretrees Sg
🌳 Explore Trees in Singapore 🇸🇬
Stars: ✭ 68 (-11.69%)
Mutual labels:  map
React Usa Map
React component with all USA States with customizable options. No D3 needed.
Stars: ✭ 63 (-18.18%)
Mutual labels:  map
Agilework
可视化低代码快速开发平台,面向业务、企业管理系统定制开发平台和应用平台,包括设计器、应用端。提供业务配置和集成开发能力,用户通过可视化拖拉拽配置式操作即可快速构建出能同时在PC和移动端运行的各类管理系统,对于企业客户的信息系统在管理模式、业务流程、表单界面、数据可视化展示、IoT管控等个性化需求,可以通过设计器,快速的进行个性化配置。并支持企业微信,公众号,钉钉等移动集成,实现用户跨区域移动办公。从而构建企业个性化的行业应用、集成应用和复杂的业务报表。
Stars: ✭ 76 (-1.3%)
Mutual labels:  map
Sharebook Frontend
Projeto frontend de código livre para o app Sharebook.
Stars: ✭ 59 (-23.38%)
Mutual labels:  angular6
Vue Cosha
🎨 A vue directive for the cosha library
Stars: ✭ 64 (-16.88%)
Mutual labels:  directive
Unity Plane Mesh Splitter
Unity Plane Mesh Splitter
Stars: ✭ 71 (-7.79%)
Mutual labels:  map

Agm-Direction

npm version npm peerDependencies Status Build Status GitHub license PRs Welcome

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

  • Angular
  • Google Map API

How to use?
👉 Start Reading

Agm-Direction

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

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].