Input

Usage

The DirectionsRequest object literal contains the following fields:

👉 DirectionsRequest

public origin: LatLng | string | google.maps.Place
public destination: LatLng | string | google.maps.Place
public travelMode: string = 'DRIVING'
public transitOptions: any = undefined
public drivingOptions: any = undefined
public waypoints: object = []
public optimizeWaypoints: boolean = true
public provideRouteAlternatives: boolean = false
public avoidHighways: boolean = false
public avoidTolls: boolean = false
public renderOptions: any
public visible: boolean = true
public panel: object | undefined
public markerOptions: { 
    origin: { 
        infoWindow: string,
        ...
    }, 
    destination: { 
        infoWindow: string,
        ... 
    },
    waypoints: [
        {
         infoWindow: string,
        ...        
        },
    ],
}
public infoWindow: InfoWindow = undefined

Example

⭐️ origin

<agm-direction ... [origin]="origin"></agm-direction>

public origin: any = { lat: 24.799448, lng: 120.979021 }

// or

public origin: string = 'Taipei Main Station'

⭐️ destination

<agm-direction ... [destination]="destination"></agm-direction>

public destination: any = { lat: 24.799524, lng: 120.975017 }

// or

public destination: string = 'Taiwan Presidential Office'

⭐️ travelMode

<agm-direction ... [travelMode]="travelMode"></agm-direction>

public transitOptions: string = 'TRANSIT' // default: 'DRIVING'

⭐️ transitOptions

<agm-direction ... [travelMode]="travelMode" [transitOptions]="transitOptions"></agm-direction>

public transitOptions: string = 'TRANSIT'
public transitOptions: any = {
    departureTime: new Date('2018/05/20 13:14'),
    arrivalTime: new Date('2018/05/20 13:30'),
    modes: ['BUS'],
}

⭐️ drivingOptions

<agm-direction ... [drivingOptions]="drivingOptions"></agm-direction>

public drivingOptions: any = {
    departureTime: new Date('2018/05/20 13:14'),
    arrivalTime: new Date('2018/05/20 13:30'),
    modes: ['BUS'],
}

⭐️ waypoints

<agm-direction ... [waypoints]="waypoints"></agm-direction>

public waypoints: object = [
    {
        location: { lat: myLat, lng: myLng },
        stopover: true,
    },
    {
        location: 'Joplin, MO',
        stopover: false,
    },{
        location: 'Oklahoma City, OK',
        stopover: true,
    }]

⭐️ optimizeWaypoints

<agm-direction ... [waypoints]="waypoints" [optimizeWaypoints]="optimizeWaypoints"></agm-direction>

public waypoints: object = [...]
public optimizeWaypoints: boolean = false // default: true

⭐️ provideRouteAlternatives

<agm-direction ... [waypoints]="waypoints" [provideRouteAlternatives]="provideRouteAlternatives"></agm-direction>

public waypoints: object = [...]
public provideRouteAlternatives: boolean = true // default: false

⭐️ avoidHighways

<agm-direction ... [avoidHighways]="avoidHighways"></agm-direction>

public avoidHighways: boolean = true // default: false

⭐️ avoidTolls

<agm-direction ... [avoidTolls]="avoidTolls"></agm-direction>

public avoidTolls: boolean = true // default: false

⭐️ renderOptions

<agm-direction ... [renderOptions]="renderOptions"></agm-direction>

public renderOptions: any = {
    draggable: true,
    suppressMarkers: true,
    suppressInfoWindows: false,
    markerOptions: { // effect all markers
        icon: 'your-icon-url',
    },
}

⭐️ visible

<agm-direction ... [visible]="visible"></agm-direction>

public visible: boolean = false // default: true

⭐️ panel

<agm-direction ... [panel]="myPanel"></agm-direction>
<div #myPanel></div

or

<agm-direction ... [panel]="setPanel()"></agm-direction>
<div id="myPanel"></div>

public setPanel() {
    return document.querySelector('#myPanel');
}

⭐️ markerOptions

Custom origin and destination markers:

<agm-direction ... [renderOptions]="renderOptions" [markerOptions]="markerOptions"></agm-direction>

public renderOptions = {
    suppressMarkers: true,
}

public markerOptions = {
    origin: {
        infoWindow: 'This is origin.',
        icon: 'your-icon-url',
        draggable: true,
    },
    destination: {
        icon: 'your-icon-url',
        label: 'marker label',
        opacity: 0.8,
    },
}

Custom origin, destination and waypoints markers:

public markerOptions = {
    origin: {
        infoWindow: 'This is origin.',
        icon: 'your-icon-url',
        draggable: true,
    },
    destination: {
        icon: 'your-icon-url',
        label: 'marker label',
        opacity: 0.8,
    },
    waypoints: [
      {
        icon: 'your-icon-url',
        label: 'marker label',
        opacity: 0.8,
      },
      {
        icon: 'your-icon-url',
        label: 'marker label',
        opacity: 0.8,
      },
    ],
}

Set all waypoints are the same properties:

public markerOptions = {
    origin: {
        infoWindow: 'This is origin.',
        icon: 'your-icon-url',
        draggable: true,
    },
    destination: {
        icon: 'your-icon-url',
        label: 'marker label',
        opacity: 0.8,
    },
    waypoints: {
        icon: 'your-icon-url',
        label: 'marker label',
        opacity: 0.8,
    },
}

⭐️ infoWindow

<agm-direction ... [infoWindow]="infoWindow"></agm-direction>

import { InfoWindow } from '@agm/core/services/google-maps-types' // option

public infoWindow: InfoWindow = undefined