MapQuest-GL.js

mqgl.Map.directions

The directions object performs Directions API calls and places route ribbons and markers on the map.

Methods

mqgl.Map.directions.route(locations)

Performs a Directions API Route request and places the ribbon and markers on a map.

Syntax

Simple
var map = new mqgl.Map('map', 'KEY', {
  center: [-74.0059, 40.7128],
  zoom: 12
});

map.load( () => {
  map.directions.route(['Brooklyn, NY', 'Manhattan, NY'])
    .then( data => map.fitBounds() );
});
Customized
var map = new mqgl.Map('map', 'KEY', {
  center: [-74.0059, 40.7128],
  zoom: 12,
  directions: {
    ribbon: {
      color: '#2aa6ce',
      opacity: 1.0,
      showTraffic: false
    },
    startMarker: 'circle-A-1fc715-1fc715.png',
    endMarker: 'circle-B-e9304f-e9304f.png'
  }
});

map.load( () => {
  map.directions.route(['Brooklyn, NY', 'Manhattan, NY'])
    .then( data => map.fitBounds() );
});

Parameters

  • locations required array

    An array of single line locations that define the start, waypoint, and end locations of a route from left to right.

Customization

Route ribbons and markers can be customized using the map options object. The options object is described on the Options page.

Return Value

A Promise, consisting of a Directions API response object.

Visual Examples

Simple

Customized