CODEWITHSUNDEEP
angulargoogle-maps-api-3
Ayoub Idelhoussain
Ayoub Idelhoussain

Reputation: 655

show direction on google maps for angular 2 Agm

I'm using Agm to show position on the maps, It's working perfectly so far but now i need to also show directions, like that line that links two points in the maps during navigation, i looked in the documentation but it's not showing much.
thank you

Upvotes: 3

Views: 9815

Answers (1)

Robby
Robby

Reputation: 51

agm-direction may help you

step.1 install agm

npm install --save @agm/core

step.2 install agm-direction

npm install --save agm-direction

step.3 import Module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { AgmCoreModule } from '@agm/core'; 
import { AgmDirectionModule } from 'agm-direction';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AgmCoreModule.forRoot({ // @agm/core
      apiKey: 'your key',
    }),
    AgmDirectionModule      // agm-direction
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

step.4 html

<agm-map [latitude]="lat" [longitude]="lng">

  <agm-direction *ngIf="dir" [origin]="dir.origin" [destination]="dir.destination"></agm-direction>

</agm-map>

step.5 typescript

  lat: Number = 24.799448;
    lng: Number = 120.979021;
    zoom: Number = 14;

    dir = undefined;

    public getDirection() {
      this.dir = {
        origin: { lat: 24.799448, lng: 120.979021 },
        destination: { lat: 24.799524, lng: 120.975017 }
      }
    }

Attribute

  • origin: { lat, lng };
  • destination: { lat, lng };
  • waypoints: Object = [];
  • travelMode: String = 'DRIVING';
  • optimizeWaypoints: Boolean = true;

Upvotes: 4

Related Questions