Google maps get directions from my location

Google Maps has changed how we navigate the world. Its desktop and mobile apps have become not just a way to get from point A to B via car, public transportation, or on foot. The ubiquitous Google service is also a geospatial search engine for the world around us.

Google continues to revamp and improve its map product, but there are a ton of customizable tools and hidden functions already baked into Google Maps that you may not know about, such as Incognito Mode. Check out our tips for how to maximize your Google Maps power.


1. COVID-19 Testing and Vaccination

Google maps get directions from my location

If you're short of change(Opens in a new window) in your car, you can feed the parking meter right from Maps. Open the app as you approach a stop and you'll see Pay for Parking pop up(Opens in a new window). Select it, type in your meter number and how long you'll be at the spot, and you can pay right from your phone.


16. Remember Where You Parked

Here's how to use Google Maps to help people experiencing homelessness

Like What You're Reading?

Sign up for Tips & Tricks newsletter for expert advice to get the most out of your technology.

Email

Sign Up

This newsletter may contain advertising, deals, or affiliate links. Subscribing to a newsletter indicates your consent to our Terms of Use and Privacy Policy. You may unsubscribe from the newsletters at any time.


Thanks for signing up!

Your subscription has been confirmed. Keep an eye on your inbox!

Sign up for other newsletters

About Chandra Steele

Senior Features Writer

Google maps get directions from my location

My title is Senior Features Writer, which is a license to write about absolutely anything if I can connect it to technology (I can). I’ve been at PCMag since 2011 and have covered the surveillance state, vaccination cards, ghost guns, voting, ISIS, art, fashion, film, design, gender bias, and more. You might have seen me on TV talking about these topics or heard me on your commute home on the radio or a podcast. Or maybe you’ve just seen my Bernie meme. 

I strive to explain topics that you might come across in the news but not fully understand, such as NFTs and meme stocks. I’ve had the pleasure of talking tech with Jeff Goldblum, Ang Lee, and other celebrities who have brought a different perspective to it. I put great care into writing gift guides and am always touched by the notes I get from people who’ve used them to choose presents that have been well-received. Though I love that I get to write about the tech industry every day, it’s touched by gender, racial, and socioeconomic inequality and I try to bring these topics to light. 

Use this tools to get the directions between any point using google maps. Enter a city, a zipcode, or an address in both the From and the To address inputs. Click Find Directions, and the tool will display the route you need to take to get from your starting location to your end location. The turn by turn directions will be diplayed below the map, and will contain the distance and approximate time it will take to get from on location to the other.

This page describes the client-side service available with the Maps JavaScript API. If you want to work with Google Maps web services on your server, take a look at the Node.js Client for Google Maps Services. The page at that link also introduces the Java Client, Python Client and Go Client for Google Maps Services.

Overview

Also see the Maps JavaScript API Reference: Directions

You can calculate directions (using a variety of methods of transportation) by using the

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
8 object. This object communicates with the Google Maps API Directions Service which receives direction requests and returns an efficient path. Travel time is the primary factor which is optimized, but other factors such as distance, number of turns and many more may be taken into account. You may either handle these directions results yourself or use the
{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
9 object to render these results.

When specifying the origin or destination in a directions request, you can specify a query string (for example, "Chicago, IL" or "Darwin, NSW, Australia"), a

{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
0 value, or a Place object.

The Directions service can return multi-part directions using a series of waypoints. Directions are displayed as a polyline drawing the route on a map, or additionally as a series of textual description within a

{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
1 element (for example, "Turn right onto the Williamsburg Bridge ramp").

Getting started

Before using the Directions service in the Maps JavaScript API, first ensure that the Directions API is enabled in the Google Cloud Console, in the same project you set up for the Maps JavaScript API.

To view your list of enabled APIs:

  1. Go to the Google Cloud Console.
  2. Click the Select a project button, then select the same project you set up for the Maps JavaScript API and click Open.
  3. From the list of APIs on the Dashboard, look for Directions API.
  4. If you see the API in the list, you’re all set. If the API is not listed, enable it:
    1. At the top of the page, select ENABLE API to display the Library tab. Alternatively, from the left side menu, select Library.
    2. Search for Directions API, then select it from the results list.
    3. Select ENABLE. When the process finishes, Directions API appears in the list of APIs on the Dashboard.

Pricing and policies

Pricing

Effective July 16, 2018, a new pay-as-you-go pricing plan went into effect for Maps, Routes, and Places. To learn more about the new pricing and usage limits for your use of the JavaScript Directions service, see Usage and Billing for the Directions API.

Policies

Use of the Directions service must be in accordance with the policies described for the Directions API.

Directions Requests

Accessing the Directions service is asynchronous, since the Google Maps API needs to make a call to an external server. For that reason, you need to pass a callback method to execute upon completion of the request. This callback method should process the result(s). Note that the Directions service may return more than one possible itinerary as an array of separate

{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
2.

To use directions in the Maps JavaScript API, create an object of type

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
8 and call
{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
4 to initiate a request to the Directions service, passing it a
{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
5 object literal containing the input terms and a callback method to execute upon receipt of the response.

The

{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
5 object literal contains the following fields:

{
  origin: LatLng | String | google.maps.Place,
  destination: LatLng | String | google.maps.Place,
  travelMode: TravelMode,
  transitOptions: TransitOptions,
  drivingOptions: DrivingOptions,
  unitSystem: UnitSystem,
  waypoints[]: DirectionsWaypoint,
  optimizeWaypoints: Boolean,
  provideRouteAlternatives: Boolean,
  avoidFerries: Boolean,
  avoidHighways: Boolean,
  avoidTolls: Boolean,
  region: String
}

These fields are explained below:

  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    7 (required) specifies the start location from which to calculate directions. This value may be specified as a
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    8 (for example, "Chicago, IL"), as a
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    0 value or as a Place object. If you use a Place object, you can specify a place ID, a query string or a
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    0 location. You can retrieve place IDs from the Geocoding, Place Search and Place Autocomplete services in the Maps JavaScript API. For an example using place IDs from Place Autocomplete, see Place Autocomplete and Directions.
  • {
      origin: 'Hoboken NJ',
      destination: 'Carroll Gardens, Brooklyn',
      travelMode: 'TRANSIT',
      transitOptions: {
        departureTime: new Date(1337675679473),
        modes: ['BUS'],
        routingPreference: 'FEWER_TRANSFERS'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    1 (required) specifies the end location to which to calculate directions. The options are the same as for the
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    7 field described above.
  • {
      origin: 'Hoboken NJ',
      destination: 'Carroll Gardens, Brooklyn',
      travelMode: 'TRANSIT',
      transitOptions: {
        departureTime: new Date(1337675679473),
        modes: ['BUS'],
        routingPreference: 'FEWER_TRANSFERS'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    3 (required) specifies what mode of transport to use when calculating directions. Valid values are specified in Travel Modes below.
  • {
      origin: 'Hoboken NJ',
      destination: 'Carroll Gardens, Brooklyn',
      travelMode: 'TRANSIT',
      transitOptions: {
        departureTime: new Date(1337675679473),
        modes: ['BUS'],
        routingPreference: 'FEWER_TRANSFERS'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    4 (optional) specifies values that apply only to requests where
    {
      origin: 'Hoboken NJ',
      destination: 'Carroll Gardens, Brooklyn',
      travelMode: 'TRANSIT',
      transitOptions: {
        departureTime: new Date(1337675679473),
        modes: ['BUS'],
        routingPreference: 'FEWER_TRANSFERS'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    3 is
    {
      origin: 'Hoboken NJ',
      destination: 'Carroll Gardens, Brooklyn',
      travelMode: 'TRANSIT',
      transitOptions: {
        departureTime: new Date(1337675679473),
        modes: ['BUS'],
        routingPreference: 'FEWER_TRANSFERS'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    6. Valid values are described in Transit Options, below.
  • {
      origin: 'Hoboken NJ',
      destination: 'Carroll Gardens, Brooklyn',
      travelMode: 'TRANSIT',
      transitOptions: {
        departureTime: new Date(1337675679473),
        modes: ['BUS'],
        routingPreference: 'FEWER_TRANSFERS'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    7 (optional) specifies values that apply only to requests where
    {
      origin: 'Hoboken NJ',
      destination: 'Carroll Gardens, Brooklyn',
      travelMode: 'TRANSIT',
      transitOptions: {
        departureTime: new Date(1337675679473),
        modes: ['BUS'],
        routingPreference: 'FEWER_TRANSFERS'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    3 is
    {
      origin: 'Hoboken NJ',
      destination: 'Carroll Gardens, Brooklyn',
      travelMode: 'TRANSIT',
      transitOptions: {
        departureTime: new Date(1337675679473),
        modes: ['BUS'],
        routingPreference: 'FEWER_TRANSFERS'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    9. Valid values are described in Driving Options, below.
  • {
      departureTime: Date,
      trafficModel: TrafficModel
    }
    
    0 (optional) specifies what unit system to use when displaying results. Valid values are specified in Unit Systems below.

  • {
      departureTime: Date,
      trafficModel: TrafficModel
    }
    
    1 (optional) specifies an array of
    {
      departureTime: Date,
      trafficModel: TrafficModel
    }
    
    2s. Waypoints alter a route by routing it through the specified location(s). A waypoint is specified as an object literal with fields shown below:

    • {
        departureTime: Date,
        trafficModel: TrafficModel
      }
      
      3 specifies the location of the waypoint, as a
      {
        arrivalTime: Date,
        departureTime: Date,
        modes[]: TransitMode,
        routingPreference: TransitRoutePreference
      }
      
      0, as a Place object or as a
      {
        arrivalTime: Date,
        departureTime: Date,
        modes[]: TransitMode,
        routingPreference: TransitRoutePreference
      }
      
      8 which will be geocoded.
    • {
        departureTime: Date,
        trafficModel: TrafficModel
      }
      
      6 is a boolean which indicates that the waypoint is a stop on the route, which has the effect of splitting the route into two routes.

    (For more information on waypoints, see Using Waypoints in Routes below.)

  • {
      departureTime: Date,
      trafficModel: TrafficModel
    }
    
    7 (optional) specifies that the route using the supplied
    {
      departureTime: Date,
      trafficModel: TrafficModel
    }
    
    8 may be optimized by rearranging the waypoints in a more efficient order. If
    {
      departureTime: Date,
      trafficModel: TrafficModel
    }
    
    9, the Directions service will return the reordered
    {
      departureTime: Date,
      trafficModel: TrafficModel
    }
    
    8 in a
    {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(Date.now() + N),  // for the time N milliseconds from now.
        trafficModel: 'optimistic'
      }
    }
    
    1 field.(For more information, see Using Waypoints in Routes below.)
  • {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(Date.now() + N),  // for the time N milliseconds from now.
        trafficModel: 'optimistic'
      }
    }
    
    2 (optional) when set to
    {
      departureTime: Date,
      trafficModel: TrafficModel
    }
    
    9 specifies that the Directions service may provide more than one route alternative in the response. Note that providing route alternatives may increase the response time from the server. This is only available for requests without intermediate waypoints.
  • {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(Date.now() + N),  // for the time N milliseconds from now.
        trafficModel: 'optimistic'
      }
    }
    
    4 (optional) when set to
    {
      departureTime: Date,
      trafficModel: TrafficModel
    }
    
    9 indicates that the calculated route(s) should avoid ferries, if possible.
  • {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(Date.now() + N),  // for the time N milliseconds from now.
        trafficModel: 'optimistic'
      }
    }
    
    6 (optional) when set to
    {
      departureTime: Date,
      trafficModel: TrafficModel
    }
    
    9 indicates that the calculated route(s) should avoid major highways, if possible.
  • {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(Date.now() + N),  // for the time N milliseconds from now.
        trafficModel: 'optimistic'
      }
    }
    
    8 (optional) when set to
    {
      departureTime: Date,
      trafficModel: TrafficModel
    }
    
    9 indicates that the calculated route(s) should avoid toll roads, if possible.
  • function initMap() {
      var directionsService = new google.maps.DirectionsService();
      var directionsRenderer = new google.maps.DirectionsRenderer();
      var chicago = new google.maps.LatLng(41.850033, -87.6500523);
      var mapOptions = {
        zoom:7,
        center: chicago
      }
      var map = new google.maps.Map(document.getElementById('map'), mapOptions);
      directionsRenderer.setMap(map);
    }
    
    function calcRoute() {
      var start = document.getElementById('start').value;
      var end = document.getElementById('end').value;
      var request = {
        origin: start,
        destination: end,
        travelMode: 'DRIVING'
      };
      directionsService.route(request, function(result, status) {
        if (status == 'OK') {
          directionsRenderer.setDirections(result);
        }
      });
    }
    
    0 (optional) specifies the region code, specified as a ccTLD ("top-level domain") two-character value. (For more information see Region Biasing below.)
Note: The
function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(result, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(result);
    }
  });
}
1 field is now deprecated. It was previously the recommended way for Google Maps Platform Premium Plan customers to specify whether the result should include a duration that takes into account current traffic conditions. You should now use the
{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
7 field instead.

Below is a sample

{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
5:

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}

Travel Modes

When you calculate directions, you need to specify which transportation mode to use. The following travel modes are currently supported:

  • {
      origin: 'Hoboken NJ',
      destination: 'Carroll Gardens, Brooklyn',
      travelMode: 'TRANSIT',
      transitOptions: {
        departureTime: new Date(1337675679473),
        modes: ['BUS'],
        routingPreference: 'FEWER_TRANSFERS'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    9 (Default) indicates standard driving directions using the road network.
  • function initMap() {
      var directionsService = new google.maps.DirectionsService();
      var directionsRenderer = new google.maps.DirectionsRenderer();
      var chicago = new google.maps.LatLng(41.850033, -87.6500523);
      var mapOptions = {
        zoom:7,
        center: chicago
      }
      var map = new google.maps.Map(document.getElementById('map'), mapOptions);
      directionsRenderer.setMap(map);
    }
    
    function calcRoute() {
      var start = document.getElementById('start').value;
      var end = document.getElementById('end').value;
      var request = {
        origin: start,
        destination: end,
        travelMode: 'DRIVING'
      };
      directionsService.route(request, function(result, status) {
        if (status == 'OK') {
          directionsRenderer.setDirections(result);
        }
      });
    }
    
    5 requests bicycling directions via bicycle paths & preferred streets.
  • {
      origin: 'Hoboken NJ',
      destination: 'Carroll Gardens, Brooklyn',
      travelMode: 'TRANSIT',
      transitOptions: {
        departureTime: new Date(1337675679473),
        modes: ['BUS'],
        routingPreference: 'FEWER_TRANSFERS'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    6 requests directions via public transit routes.
  • function initMap() {
      var directionsService = new google.maps.DirectionsService();
      var directionsRenderer = new google.maps.DirectionsRenderer();
      var chicago = new google.maps.LatLng(41.850033, -87.6500523);
      var mapOptions = {
        zoom:7,
        center: chicago
      }
      var map = new google.maps.Map(document.getElementById('map'), mapOptions);
      directionsRenderer.setMap(map);
    }
    
    function calcRoute() {
      var start = document.getElementById('start').value;
      var end = document.getElementById('end').value;
      var request = {
        origin: start,
        destination: end,
        travelMode: 'DRIVING'
      };
      directionsService.route(request, function(result, status) {
        if (status == 'OK') {
          directionsRenderer.setDirections(result);
        }
      });
    }
    
    7 requests walking directions via pedestrian paths & sidewalks.

Consult the Google Maps Platform Coverage Details to determine to what extent a country supports directions. If you request directions for a region in which that direction type is not available, the response will return the

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(result, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(result);
    }
  });
}
8="
function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(result, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(result);
    }
  });
}
9".

Note: Walking directions may not include clear pedestrian paths, so walking directions will return warnings in the

<div>
<strong>Start: </strong>
<select id="start" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
</div>
0 which you must display if you are not using the default
{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
9.

Transit Options

The available options for a directions request vary between travel modes. When requesting transit directions, the

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(Date.now() + N),  // for the time N milliseconds from now.
    trafficModel: 'optimistic'
  }
}
6,
{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(Date.now() + N),  // for the time N milliseconds from now.
    trafficModel: 'optimistic'
  }
}
8,
{
  departureTime: Date,
  trafficModel: TrafficModel
}
1 and
{
  departureTime: Date,
  trafficModel: TrafficModel
}
7 options will be ignored. You can specify transit specific routing options through the
<div>
<strong>Start: </strong>
<select id="start" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
</div>
6 object literal.

Transit directions are time sensitive. Directions will only be returned for times in the future.

The

<div>
<strong>Start: </strong>
<select id="start" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
</div>
6 object literal contains the following fields:

{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}

These fields are explained below:

  • <div>
    <strong>Start: </strong>
    <select id="start" onchange="calcRoute();">
      <option value="chicago, il">Chicago</option>
      <option value="st louis, mo">St Louis</option>
      <option value="joplin, mo">Joplin, MO</option>
      <option value="oklahoma city, ok">Oklahoma City</option>
      <option value="amarillo, tx">Amarillo</option>
      <option value="gallup, nm">Gallup, NM</option>
      <option value="flagstaff, az">Flagstaff, AZ</option>
      <option value="winona, az">Winona</option>
      <option value="kingman, az">Kingman</option>
      <option value="barstow, ca">Barstow</option>
      <option value="san bernardino, ca">San Bernardino</option>
      <option value="los angeles, ca">Los Angeles</option>
    </select>
    <strong>End: </strong>
    <select id="end" onchange="calcRoute();">
      <option value="chicago, il">Chicago</option>
      <option value="st louis, mo">St Louis</option>
      <option value="joplin, mo">Joplin, MO</option>
      <option value="oklahoma city, ok">Oklahoma City</option>
      <option value="amarillo, tx">Amarillo</option>
      <option value="gallup, nm">Gallup, NM</option>
      <option value="flagstaff, az">Flagstaff, AZ</option>
      <option value="winona, az">Winona</option>
      <option value="kingman, az">Kingman</option>
      <option value="barstow, ca">Barstow</option>
      <option value="san bernardino, ca">San Bernardino</option>
      <option value="los angeles, ca">Los Angeles</option>
    </select>
    </div>
    
    8 (optional) specifies the desired time of arrival as a
    <div>
    <strong>Start: </strong>
    <select id="start" onchange="calcRoute();">
      <option value="chicago, il">Chicago</option>
      <option value="st louis, mo">St Louis</option>
      <option value="joplin, mo">Joplin, MO</option>
      <option value="oklahoma city, ok">Oklahoma City</option>
      <option value="amarillo, tx">Amarillo</option>
      <option value="gallup, nm">Gallup, NM</option>
      <option value="flagstaff, az">Flagstaff, AZ</option>
      <option value="winona, az">Winona</option>
      <option value="kingman, az">Kingman</option>
      <option value="barstow, ca">Barstow</option>
      <option value="san bernardino, ca">San Bernardino</option>
      <option value="los angeles, ca">Los Angeles</option>
    </select>
    <strong>End: </strong>
    <select id="end" onchange="calcRoute();">
      <option value="chicago, il">Chicago</option>
      <option value="st louis, mo">St Louis</option>
      <option value="joplin, mo">Joplin, MO</option>
      <option value="oklahoma city, ok">Oklahoma City</option>
      <option value="amarillo, tx">Amarillo</option>
      <option value="gallup, nm">Gallup, NM</option>
      <option value="flagstaff, az">Flagstaff, AZ</option>
      <option value="winona, az">Winona</option>
      <option value="kingman, az">Kingman</option>
      <option value="barstow, ca">Barstow</option>
      <option value="san bernardino, ca">San Bernardino</option>
      <option value="los angeles, ca">Los Angeles</option>
    </select>
    </div>
    
    9 object. If arrival time is specified, departure time is ignored.
  • function initMap() {
      var directionsService = new google.maps.DirectionsService();
      var directionsRenderer = new google.maps.DirectionsRenderer();
      var haight = new google.maps.LatLng(37.7699298, -122.4469157);
      var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
      var mapOptions = {
        zoom: 14,
        center: haight
      }
      var map = new google.maps.Map(document.getElementById('map'), mapOptions);
      directionsRenderer.setMap(map);
    }
    
    function calcRoute() {
      var selectedMode = document.getElementById('mode').value;
      var request = {
          origin: haight,
          destination: oceanBeach,
          // Note that JavaScript allows us to access the constant
          // using square brackets and a string value as its
          // "property."
          travelMode: google.maps.TravelMode[selectedMode]
      };
      directionsService.route(request, function(response, status) {
        if (status == 'OK') {
          directionsRenderer.setDirections(response);
        }
      });
    }
    
    0 (optional) specifies the desired time of departure as a
    <div>
    <strong>Start: </strong>
    <select id="start" onchange="calcRoute();">
      <option value="chicago, il">Chicago</option>
      <option value="st louis, mo">St Louis</option>
      <option value="joplin, mo">Joplin, MO</option>
      <option value="oklahoma city, ok">Oklahoma City</option>
      <option value="amarillo, tx">Amarillo</option>
      <option value="gallup, nm">Gallup, NM</option>
      <option value="flagstaff, az">Flagstaff, AZ</option>
      <option value="winona, az">Winona</option>
      <option value="kingman, az">Kingman</option>
      <option value="barstow, ca">Barstow</option>
      <option value="san bernardino, ca">San Bernardino</option>
      <option value="los angeles, ca">Los Angeles</option>
    </select>
    <strong>End: </strong>
    <select id="end" onchange="calcRoute();">
      <option value="chicago, il">Chicago</option>
      <option value="st louis, mo">St Louis</option>
      <option value="joplin, mo">Joplin, MO</option>
      <option value="oklahoma city, ok">Oklahoma City</option>
      <option value="amarillo, tx">Amarillo</option>
      <option value="gallup, nm">Gallup, NM</option>
      <option value="flagstaff, az">Flagstaff, AZ</option>
      <option value="winona, az">Winona</option>
      <option value="kingman, az">Kingman</option>
      <option value="barstow, ca">Barstow</option>
      <option value="san bernardino, ca">San Bernardino</option>
      <option value="los angeles, ca">Los Angeles</option>
    </select>
    </div>
    
    9 object. The
    function initMap() {
      var directionsService = new google.maps.DirectionsService();
      var directionsRenderer = new google.maps.DirectionsRenderer();
      var haight = new google.maps.LatLng(37.7699298, -122.4469157);
      var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
      var mapOptions = {
        zoom: 14,
        center: haight
      }
      var map = new google.maps.Map(document.getElementById('map'), mapOptions);
      directionsRenderer.setMap(map);
    }
    
    function calcRoute() {
      var selectedMode = document.getElementById('mode').value;
      var request = {
          origin: haight,
          destination: oceanBeach,
          // Note that JavaScript allows us to access the constant
          // using square brackets and a string value as its
          // "property."
          travelMode: google.maps.TravelMode[selectedMode]
      };
      directionsService.route(request, function(response, status) {
        if (status == 'OK') {
          directionsRenderer.setDirections(response);
        }
      });
    }
    
    0 will be ignored if
    <div>
    <strong>Start: </strong>
    <select id="start" onchange="calcRoute();">
      <option value="chicago, il">Chicago</option>
      <option value="st louis, mo">St Louis</option>
      <option value="joplin, mo">Joplin, MO</option>
      <option value="oklahoma city, ok">Oklahoma City</option>
      <option value="amarillo, tx">Amarillo</option>
      <option value="gallup, nm">Gallup, NM</option>
      <option value="flagstaff, az">Flagstaff, AZ</option>
      <option value="winona, az">Winona</option>
      <option value="kingman, az">Kingman</option>
      <option value="barstow, ca">Barstow</option>
      <option value="san bernardino, ca">San Bernardino</option>
      <option value="los angeles, ca">Los Angeles</option>
    </select>
    <strong>End: </strong>
    <select id="end" onchange="calcRoute();">
      <option value="chicago, il">Chicago</option>
      <option value="st louis, mo">St Louis</option>
      <option value="joplin, mo">Joplin, MO</option>
      <option value="oklahoma city, ok">Oklahoma City</option>
      <option value="amarillo, tx">Amarillo</option>
      <option value="gallup, nm">Gallup, NM</option>
      <option value="flagstaff, az">Flagstaff, AZ</option>
      <option value="winona, az">Winona</option>
      <option value="kingman, az">Kingman</option>
      <option value="barstow, ca">Barstow</option>
      <option value="san bernardino, ca">San Bernardino</option>
      <option value="los angeles, ca">Los Angeles</option>
    </select>
    </div>
    
    8 is specified. Defaults to now (that is, the current time) if no value is specified for either
    function initMap() {
      var directionsService = new google.maps.DirectionsService();
      var directionsRenderer = new google.maps.DirectionsRenderer();
      var haight = new google.maps.LatLng(37.7699298, -122.4469157);
      var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
      var mapOptions = {
        zoom: 14,
        center: haight
      }
      var map = new google.maps.Map(document.getElementById('map'), mapOptions);
      directionsRenderer.setMap(map);
    }
    
    function calcRoute() {
      var selectedMode = document.getElementById('mode').value;
      var request = {
          origin: haight,
          destination: oceanBeach,
          // Note that JavaScript allows us to access the constant
          // using square brackets and a string value as its
          // "property."
          travelMode: google.maps.TravelMode[selectedMode]
      };
      directionsService.route(request, function(response, status) {
        if (status == 'OK') {
          directionsRenderer.setDirections(response);
        }
      });
    }
    
    0 or
    <div>
    <strong>Start: </strong>
    <select id="start" onchange="calcRoute();">
      <option value="chicago, il">Chicago</option>
      <option value="st louis, mo">St Louis</option>
      <option value="joplin, mo">Joplin, MO</option>
      <option value="oklahoma city, ok">Oklahoma City</option>
      <option value="amarillo, tx">Amarillo</option>
      <option value="gallup, nm">Gallup, NM</option>
      <option value="flagstaff, az">Flagstaff, AZ</option>
      <option value="winona, az">Winona</option>
      <option value="kingman, az">Kingman</option>
      <option value="barstow, ca">Barstow</option>
      <option value="san bernardino, ca">San Bernardino</option>
      <option value="los angeles, ca">Los Angeles</option>
    </select>
    <strong>End: </strong>
    <select id="end" onchange="calcRoute();">
      <option value="chicago, il">Chicago</option>
      <option value="st louis, mo">St Louis</option>
      <option value="joplin, mo">Joplin, MO</option>
      <option value="oklahoma city, ok">Oklahoma City</option>
      <option value="amarillo, tx">Amarillo</option>
      <option value="gallup, nm">Gallup, NM</option>
      <option value="flagstaff, az">Flagstaff, AZ</option>
      <option value="winona, az">Winona</option>
      <option value="kingman, az">Kingman</option>
      <option value="barstow, ca">Barstow</option>
      <option value="san bernardino, ca">San Bernardino</option>
      <option value="los angeles, ca">Los Angeles</option>
    </select>
    </div>
    
    8.
  • function initMap() {
      var directionsService = new google.maps.DirectionsService();
      var directionsRenderer = new google.maps.DirectionsRenderer();
      var haight = new google.maps.LatLng(37.7699298, -122.4469157);
      var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
      var mapOptions = {
        zoom: 14,
        center: haight
      }
      var map = new google.maps.Map(document.getElementById('map'), mapOptions);
      directionsRenderer.setMap(map);
    }
    
    function calcRoute() {
      var selectedMode = document.getElementById('mode').value;
      var request = {
          origin: haight,
          destination: oceanBeach,
          // Note that JavaScript allows us to access the constant
          // using square brackets and a string value as its
          // "property."
          travelMode: google.maps.TravelMode[selectedMode]
      };
      directionsService.route(request, function(response, status) {
        if (status == 'OK') {
          directionsRenderer.setDirections(response);
        }
      });
    }
    
    6 (optional) is an array containing one or more
    function initMap() {
      var directionsService = new google.maps.DirectionsService();
      var directionsRenderer = new google.maps.DirectionsRenderer();
      var haight = new google.maps.LatLng(37.7699298, -122.4469157);
      var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
      var mapOptions = {
        zoom: 14,
        center: haight
      }
      var map = new google.maps.Map(document.getElementById('map'), mapOptions);
      directionsRenderer.setMap(map);
    }
    
    function calcRoute() {
      var selectedMode = document.getElementById('mode').value;
      var request = {
          origin: haight,
          destination: oceanBeach,
          // Note that JavaScript allows us to access the constant
          // using square brackets and a string value as its
          // "property."
          travelMode: google.maps.TravelMode[selectedMode]
      };
      directionsService.route(request, function(response, status) {
        if (status == 'OK') {
          directionsRenderer.setDirections(response);
        }
      });
    }
    
    7 object literals. This field may only be included if the request includes an API key. Each
    function initMap() {
      var directionsService = new google.maps.DirectionsService();
      var directionsRenderer = new google.maps.DirectionsRenderer();
      var haight = new google.maps.LatLng(37.7699298, -122.4469157);
      var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
      var mapOptions = {
        zoom: 14,
        center: haight
      }
      var map = new google.maps.Map(document.getElementById('map'), mapOptions);
      directionsRenderer.setMap(map);
    }
    
    function calcRoute() {
      var selectedMode = document.getElementById('mode').value;
      var request = {
          origin: haight,
          destination: oceanBeach,
          // Note that JavaScript allows us to access the constant
          // using square brackets and a string value as its
          // "property."
          travelMode: google.maps.TravelMode[selectedMode]
      };
      directionsService.route(request, function(response, status) {
        if (status == 'OK') {
          directionsRenderer.setDirections(response);
        }
      });
    }
    
    7 specifies a preferred mode of transit. The following values are permitted:
    • function initMap() {
        var directionsService = new google.maps.DirectionsService();
        var directionsRenderer = new google.maps.DirectionsRenderer();
        var haight = new google.maps.LatLng(37.7699298, -122.4469157);
        var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
        var mapOptions = {
          zoom: 14,
          center: haight
        }
        var map = new google.maps.Map(document.getElementById('map'), mapOptions);
        directionsRenderer.setMap(map);
      }
      
      function calcRoute() {
        var selectedMode = document.getElementById('mode').value;
        var request = {
            origin: haight,
            destination: oceanBeach,
            // Note that JavaScript allows us to access the constant
            // using square brackets and a string value as its
            // "property."
            travelMode: google.maps.TravelMode[selectedMode]
        };
        directionsService.route(request, function(response, status) {
          if (status == 'OK') {
            directionsRenderer.setDirections(response);
          }
        });
      }
      
      9 indicates that the calculated route should prefer travel by bus.
    • <div>
      <strong>Mode of Travel: </strong>
      <select id="mode" onchange="calcRoute();">
        <option value="DRIVING">Driving</option>
        <option value="WALKING">Walking</option>
        <option value="BICYCLING">Bicycling</option>
        <option value="TRANSIT">Transit</option>
      </select>
      </div>
      
      0 indicates that the calculated route should prefer travel by train, tram, light rail, and subway.
    • <div>
      <strong>Mode of Travel: </strong>
      <select id="mode" onchange="calcRoute();">
        <option value="DRIVING">Driving</option>
        <option value="WALKING">Walking</option>
        <option value="BICYCLING">Bicycling</option>
        <option value="TRANSIT">Transit</option>
      </select>
      </div>
      
      1 indicates that the calculated route should prefer travel by subway.
    • <div>
      <strong>Mode of Travel: </strong>
      <select id="mode" onchange="calcRoute();">
        <option value="DRIVING">Driving</option>
        <option value="WALKING">Walking</option>
        <option value="BICYCLING">Bicycling</option>
        <option value="TRANSIT">Transit</option>
      </select>
      </div>
      
      2 indicates that the calculated route should prefer travel by train.
    • <div>
      <strong>Mode of Travel: </strong>
      <select id="mode" onchange="calcRoute();">
        <option value="DRIVING">Driving</option>
        <option value="WALKING">Walking</option>
        <option value="BICYCLING">Bicycling</option>
        <option value="TRANSIT">Transit</option>
      </select>
      </div>
      
      3 indicates that the calculated route should prefer travel by tram and light rail.
  • <div>
    <strong>Mode of Travel: </strong>
    <select id="mode" onchange="calcRoute();">
      <option value="DRIVING">Driving</option>
      <option value="WALKING">Walking</option>
      <option value="BICYCLING">Bicycling</option>
      <option value="TRANSIT">Transit</option>
    </select>
    </div>
    
    4 (optional) specifies preferences for transit routes. Using this option, you can bias the options returned, rather than accepting the default best route chosen by the API. This field may only be specified if the request includes an API key. The following values are permitted:
    • <div>
      <strong>Mode of Travel: </strong>
      <select id="mode" onchange="calcRoute();">
        <option value="DRIVING">Driving</option>
        <option value="WALKING">Walking</option>
        <option value="BICYCLING">Bicycling</option>
        <option value="TRANSIT">Transit</option>
      </select>
      </div>
      
      5 indicates that the calculated route should prefer a limited number of transfers.
    • <div>
      <strong>Mode of Travel: </strong>
      <select id="mode" onchange="calcRoute();">
        <option value="DRIVING">Driving</option>
        <option value="WALKING">Walking</option>
        <option value="BICYCLING">Bicycling</option>
        <option value="TRANSIT">Transit</option>
      </select>
      </div>
      
      6 indicates that the calculated route should prefer limited amounts of walking.

A sample

{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
5 by transit is shown below:

{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}

Driving Options

You can specify routing options for driving directions through the

<div>
<strong>Mode of Travel: </strong>
<select id="mode" onchange="calcRoute();">
  <option value="DRIVING">Driving</option>
  <option value="WALKING">Walking</option>
  <option value="BICYCLING">Bicycling</option>
  <option value="TRANSIT">Transit</option>
</select>
</div>
8 object.

The

<div>
<strong>Mode of Travel: </strong>
<select id="mode" onchange="calcRoute();">
  <option value="DRIVING">Driving</option>
  <option value="WALKING">Walking</option>
  <option value="BICYCLING">Bicycling</option>
  <option value="TRANSIT">Transit</option>
</select>
</div>
8 object contains the following fields:

{
  departureTime: Date,
  trafficModel: TrafficModel
}

These fields are explained below:

  • function initMap() {
      var directionsService = new google.maps.DirectionsService();
      var directionsRenderer = new google.maps.DirectionsRenderer();
      var haight = new google.maps.LatLng(37.7699298, -122.4469157);
      var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
      var mapOptions = {
        zoom: 14,
        center: haight
      }
      var map = new google.maps.Map(document.getElementById('map'), mapOptions);
      directionsRenderer.setMap(map);
    }
    
    function calcRoute() {
      var selectedMode = document.getElementById('mode').value;
      var request = {
          origin: haight,
          destination: oceanBeach,
          // Note that JavaScript allows us to access the constant
          // using square brackets and a string value as its
          // "property."
          travelMode: google.maps.TravelMode[selectedMode]
      };
      directionsService.route(request, function(response, status) {
        if (status == 'OK') {
          directionsRenderer.setDirections(response);
        }
      });
    }
    
    0 (required for the
    {
      origin: 'Hoboken NJ',
      destination: 'Carroll Gardens, Brooklyn',
      travelMode: 'TRANSIT',
      transitOptions: {
        departureTime: new Date(1337675679473),
        modes: ['BUS'],
        routingPreference: 'FEWER_TRANSFERS'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    7 object literal to be valid) specifies the desired time of departure as a
    <div>
    <strong>Start: </strong>
    <select id="start" onchange="calcRoute();">
      <option value="chicago, il">Chicago</option>
      <option value="st louis, mo">St Louis</option>
      <option value="joplin, mo">Joplin, MO</option>
      <option value="oklahoma city, ok">Oklahoma City</option>
      <option value="amarillo, tx">Amarillo</option>
      <option value="gallup, nm">Gallup, NM</option>
      <option value="flagstaff, az">Flagstaff, AZ</option>
      <option value="winona, az">Winona</option>
      <option value="kingman, az">Kingman</option>
      <option value="barstow, ca">Barstow</option>
      <option value="san bernardino, ca">San Bernardino</option>
      <option value="los angeles, ca">Los Angeles</option>
    </select>
    <strong>End: </strong>
    <select id="end" onchange="calcRoute();">
      <option value="chicago, il">Chicago</option>
      <option value="st louis, mo">St Louis</option>
      <option value="joplin, mo">Joplin, MO</option>
      <option value="oklahoma city, ok">Oklahoma City</option>
      <option value="amarillo, tx">Amarillo</option>
      <option value="gallup, nm">Gallup, NM</option>
      <option value="flagstaff, az">Flagstaff, AZ</option>
      <option value="winona, az">Winona</option>
      <option value="kingman, az">Kingman</option>
      <option value="barstow, ca">Barstow</option>
      <option value="san bernardino, ca">San Bernardino</option>
      <option value="los angeles, ca">Los Angeles</option>
    </select>
    </div>
    
    9 object. The value must be set to the current time or some time in the future. It cannot be in the past. (The API converts all dates to UTC to ensure consistent handling across time zones.) For Google Maps Platform Premium Plan customers, if you include the
    function initMap() {
      var directionsService = new google.maps.DirectionsService();
      var directionsRenderer = new google.maps.DirectionsRenderer();
      var haight = new google.maps.LatLng(37.7699298, -122.4469157);
      var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
      var mapOptions = {
        zoom: 14,
        center: haight
      }
      var map = new google.maps.Map(document.getElementById('map'), mapOptions);
      directionsRenderer.setMap(map);
    }
    
    function calcRoute() {
      var selectedMode = document.getElementById('mode').value;
      var request = {
          origin: haight,
          destination: oceanBeach,
          // Note that JavaScript allows us to access the constant
          // using square brackets and a string value as its
          // "property."
          travelMode: google.maps.TravelMode[selectedMode]
      };
      directionsService.route(request, function(response, status) {
        if (status == 'OK') {
          directionsRenderer.setDirections(response);
        }
      });
    }
    
    0 in the request, the API returns the best route given the expected traffic conditions at the time, and includes the predicted time in traffic (
    {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    04) in the response. If you don't specify a departure time (that is, if the request does not include
    {
      origin: 'Hoboken NJ',
      destination: 'Carroll Gardens, Brooklyn',
      travelMode: 'TRANSIT',
      transitOptions: {
        departureTime: new Date(1337675679473),
        modes: ['BUS'],
        routingPreference: 'FEWER_TRANSFERS'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    7), the returned route is a generally good route without taking traffic conditions into account.
  • {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    06 (optional) specifies the assumptions to use when calculating time in traffic. This setting affects the value returned in the
    {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    04 field in the response, which contains the predicted time in traffic based on historical averages. Defaults to
    {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    08. The following values are permitted:
    • {
        origin: 'Chicago, IL',
        destination: 'Los Angeles, CA',
        waypoints: [
          {
            location: 'Joplin, MO',
            stopover: false
          },{
            location: 'Oklahoma City, OK',
            stopover: true
          }],
        provideRouteAlternatives: false,
        travelMode: 'DRIVING',
        drivingOptions: {
          departureTime: new Date(/* now, or future date */),
          trafficModel: 'pessimistic'
        },
        unitSystem: google.maps.UnitSystem.IMPERIAL
      }
      
      08 (default) indicates that the returned
      {
        origin: 'Chicago, IL',
        destination: 'Los Angeles, CA',
        waypoints: [
          {
            location: 'Joplin, MO',
            stopover: false
          },{
            location: 'Oklahoma City, OK',
            stopover: true
          }],
        provideRouteAlternatives: false,
        travelMode: 'DRIVING',
        drivingOptions: {
          departureTime: new Date(/* now, or future date */),
          trafficModel: 'pessimistic'
        },
        unitSystem: google.maps.UnitSystem.IMPERIAL
      }
      
      04 should be the best estimate of travel time given what is known about both historical traffic conditions and live traffic. Live traffic becomes more important the closer the
      function initMap() {
        var directionsService = new google.maps.DirectionsService();
        var directionsRenderer = new google.maps.DirectionsRenderer();
        var haight = new google.maps.LatLng(37.7699298, -122.4469157);
        var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
        var mapOptions = {
          zoom: 14,
          center: haight
        }
        var map = new google.maps.Map(document.getElementById('map'), mapOptions);
        directionsRenderer.setMap(map);
      }
      
      function calcRoute() {
        var selectedMode = document.getElementById('mode').value;
        var request = {
            origin: haight,
            destination: oceanBeach,
            // Note that JavaScript allows us to access the constant
            // using square brackets and a string value as its
            // "property."
            travelMode: google.maps.TravelMode[selectedMode]
        };
        directionsService.route(request, function(response, status) {
          if (status == 'OK') {
            directionsRenderer.setDirections(response);
          }
        });
      }
      
      0 is to now.
    • {
        origin: 'Chicago, IL',
        destination: 'Los Angeles, CA',
        waypoints: [
          {
            location: 'Joplin, MO',
            stopover: false
          },{
            location: 'Oklahoma City, OK',
            stopover: true
          }],
        provideRouteAlternatives: false,
        travelMode: 'DRIVING',
        drivingOptions: {
          departureTime: new Date(/* now, or future date */),
          trafficModel: 'pessimistic'
        },
        unitSystem: google.maps.UnitSystem.IMPERIAL
      }
      
      12 indicates that the returned
      {
        origin: 'Chicago, IL',
        destination: 'Los Angeles, CA',
        waypoints: [
          {
            location: 'Joplin, MO',
            stopover: false
          },{
            location: 'Oklahoma City, OK',
            stopover: true
          }],
        provideRouteAlternatives: false,
        travelMode: 'DRIVING',
        drivingOptions: {
          departureTime: new Date(/* now, or future date */),
          trafficModel: 'pessimistic'
        },
        unitSystem: google.maps.UnitSystem.IMPERIAL
      }
      
      04 should be longer than the actual travel time on most days, though occasional days with particularly bad traffic conditions may exceed this value.
    • {
        origin: 'Chicago, IL',
        destination: 'Los Angeles, CA',
        waypoints: [
          {
            location: 'Joplin, MO',
            stopover: false
          },{
            location: 'Oklahoma City, OK',
            stopover: true
          }],
        provideRouteAlternatives: false,
        travelMode: 'DRIVING',
        drivingOptions: {
          departureTime: new Date(/* now, or future date */),
          trafficModel: 'pessimistic'
        },
        unitSystem: google.maps.UnitSystem.IMPERIAL
      }
      
      14 indicates that the returned
      {
        origin: 'Chicago, IL',
        destination: 'Los Angeles, CA',
        waypoints: [
          {
            location: 'Joplin, MO',
            stopover: false
          },{
            location: 'Oklahoma City, OK',
            stopover: true
          }],
        provideRouteAlternatives: false,
        travelMode: 'DRIVING',
        drivingOptions: {
          departureTime: new Date(/* now, or future date */),
          trafficModel: 'pessimistic'
        },
        unitSystem: google.maps.UnitSystem.IMPERIAL
      }
      
      04 should be shorter than the actual travel time on most days, though occasional days with particularly good traffic conditions may be faster than this value.
Note: If departure time is not specified, choice of route and duration are based on road network and average time-independent traffic conditions. Results for a given request may vary over time due to changes in the road network, updated average traffic conditions, and the distributed nature of the service. Results may also vary between nearly-equivalent routes at any time or frequency.Note: To ensure that your request uses live traffic information, set the
function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var haight = new google.maps.LatLng(37.7699298, -122.4469157);
  var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
  var mapOptions = {
    zoom: 14,
    center: haight
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var selectedMode = document.getElementById('mode').value;
  var request = {
      origin: haight,
      destination: oceanBeach,
      // Note that JavaScript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
      travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request, function(response, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(response);
    }
  });
}
0 to now. Requests using traffic information are billed at a higher rate. Learn more about how Google Maps Platform products are billed.

Below is a sample

{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
5 for driving directions:

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(Date.now() + N),  // for the time N milliseconds from now.
    trafficModel: 'optimistic'
  }
}

Unit Systems

By default, directions are calculated and displayed using the unit system of the origin's country or region. (Note: Origins expressed using latitude/longitude coordinates rather than addresses always default to metric units.) For example, a route from "Chicago, IL" to "Toronto, ONT" will display results in miles, while the reverse route will display results in kilometers. You can override this unit system by setting one explicitly within the request using one of the following

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
18 values:

  • {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    19 specifies usage of the metric system. Distances are shown using kilometers.
  • {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    20 specifies usage of the Imperial (English) system. Distances are shown using miles.

Note: This unit system setting only affects the text displayed to the user. The directions result also contains distance values, not shown to the user, which are always expressed in meters.

Region Biasing for Directions

The Google Maps API Directions Service returns address results influenced by the domain (region or country) from which you loaded the JavaScript bootstrap. (Since most users load

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
21 this sets an implicit domain to the United States.) If you load the bootstrap from a different supported domain, you will get results influenced by that domain. For example, searches for "San Francisco" may return different results from applications loading
{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
21 (the United States) than one loading
{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
23 (Spain).

You can also set the Directions service to return results biased to a particular region using the

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(result, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(result);
    }
  });
}
0 parameter. This parameter takes a region code, specified as a two-character (non-numeric) Unicode region subtag. In most cases, these tags map directly to ccTLD ("top-level domain") two-character values such as "uk" in "co.uk" for example. In some cases, the
function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(result, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(result);
    }
  });
}
0 tag also supports ISO-3166-1 codes, which sometimes differ from ccTLD values ("GB" for "Great Britain" for example).

When using the

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(result, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(result);
    }
  });
}
0 parameter:

  • Specify only one country or region. Multiple values are ignored, and could result in a failed request.
  • Use only two-character region subtags (Unicode CLDR format). All other inputs will result in errors.

Region biasing is supported only for the countries and regions supporting directions. Consult Google Maps Platform Coverage Details to see international coverage for the Directions API.

Rendering Directions

Initiating a directions request to the

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
8 with the
{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
28 method requires passing a callback which executes upon completion of the service request. This callback will return a
<div>
<strong>Start: </strong>
<select id="start" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
</div>
0 and a
function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(result, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(result);
    }
  });
}
8 code in the response.

Status of Directions Query

The

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(result, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(result);
    }
  });
}
8 may return the following values:

  • {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    32 indicates the response contains a valid
    <div>
    <strong>Start: </strong>
    <select id="start" onchange="calcRoute();">
      <option value="chicago, il">Chicago</option>
      <option value="st louis, mo">St Louis</option>
      <option value="joplin, mo">Joplin, MO</option>
      <option value="oklahoma city, ok">Oklahoma City</option>
      <option value="amarillo, tx">Amarillo</option>
      <option value="gallup, nm">Gallup, NM</option>
      <option value="flagstaff, az">Flagstaff, AZ</option>
      <option value="winona, az">Winona</option>
      <option value="kingman, az">Kingman</option>
      <option value="barstow, ca">Barstow</option>
      <option value="san bernardino, ca">San Bernardino</option>
      <option value="los angeles, ca">Los Angeles</option>
    </select>
    <strong>End: </strong>
    <select id="end" onchange="calcRoute();">
      <option value="chicago, il">Chicago</option>
      <option value="st louis, mo">St Louis</option>
      <option value="joplin, mo">Joplin, MO</option>
      <option value="oklahoma city, ok">Oklahoma City</option>
      <option value="amarillo, tx">Amarillo</option>
      <option value="gallup, nm">Gallup, NM</option>
      <option value="flagstaff, az">Flagstaff, AZ</option>
      <option value="winona, az">Winona</option>
      <option value="kingman, az">Kingman</option>
      <option value="barstow, ca">Barstow</option>
      <option value="san bernardino, ca">San Bernardino</option>
      <option value="los angeles, ca">Los Angeles</option>
    </select>
    </div>
    
    0.
  • {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    34 indicates at least one of the locations specified in the request's origin, destination, or waypoints could not be geocoded.
  • function initMap() {
      var directionsService = new google.maps.DirectionsService();
      var directionsRenderer = new google.maps.DirectionsRenderer();
      var chicago = new google.maps.LatLng(41.850033, -87.6500523);
      var mapOptions = {
        zoom:7,
        center: chicago
      }
      var map = new google.maps.Map(document.getElementById('map'), mapOptions);
      directionsRenderer.setMap(map);
    }
    
    function calcRoute() {
      var start = document.getElementById('start').value;
      var end = document.getElementById('end').value;
      var request = {
        origin: start,
        destination: end,
        travelMode: 'DRIVING'
      };
      directionsService.route(request, function(result, status) {
        if (status == 'OK') {
          directionsRenderer.setDirections(result);
        }
      });
    }
    
    9 indicates no route could be found between the origin and destination.
  • {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    36 indicates that too many
    {
      departureTime: Date,
      trafficModel: TrafficModel
    }
    
    2 fields were provided in the
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    5. See the section below on limits for way points.
  • {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    39 indicates the requested route is too long and cannot be processed. This error occurs when more complex directions are returned. Try reducing the number of waypoints, turns, or instructions.
  • {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    40 indicates that the provided
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    5 was invalid. The most common causes of this error code are requests that are missing either an origin or destination, or a transit request that includes waypoints.
  • {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    42 indicates the webpage has sent too many requests within the allowed time period.
  • {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    43 indicates the webpage is not allowed to use the directions service.
  • {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    44 indicates a directions request could not be processed due to a server error. The request may succeed if you try again.

You should ensure that the directions query returned valid results by checking this value before processing the result.

Displaying the DirectionsResult

The

<div>
<strong>Start: </strong>
<select id="start" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
</div>
0 contains the result of the directions query, which you may either handle yourself, or pass to a
{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
9 object, which can automatically handle displaying the result on a map.

To display a

<div>
<strong>Start: </strong>
<select id="start" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
</div>
0 using a
{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
9, you need to do the following:

  1. Create a
    {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    9 object.
  2. Call
    {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    50 on the renderer to bind it to the passed map.
  3. Call
    {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    51 on the renderer, passing it the
    <div>
    <strong>Start: </strong>
    <select id="start" onchange="calcRoute();">
      <option value="chicago, il">Chicago</option>
      <option value="st louis, mo">St Louis</option>
      <option value="joplin, mo">Joplin, MO</option>
      <option value="oklahoma city, ok">Oklahoma City</option>
      <option value="amarillo, tx">Amarillo</option>
      <option value="gallup, nm">Gallup, NM</option>
      <option value="flagstaff, az">Flagstaff, AZ</option>
      <option value="winona, az">Winona</option>
      <option value="kingman, az">Kingman</option>
      <option value="barstow, ca">Barstow</option>
      <option value="san bernardino, ca">San Bernardino</option>
      <option value="los angeles, ca">Los Angeles</option>
    </select>
    <strong>End: </strong>
    <select id="end" onchange="calcRoute();">
      <option value="chicago, il">Chicago</option>
      <option value="st louis, mo">St Louis</option>
      <option value="joplin, mo">Joplin, MO</option>
      <option value="oklahoma city, ok">Oklahoma City</option>
      <option value="amarillo, tx">Amarillo</option>
      <option value="gallup, nm">Gallup, NM</option>
      <option value="flagstaff, az">Flagstaff, AZ</option>
      <option value="winona, az">Winona</option>
      <option value="kingman, az">Kingman</option>
      <option value="barstow, ca">Barstow</option>
      <option value="san bernardino, ca">San Bernardino</option>
      <option value="los angeles, ca">Los Angeles</option>
    </select>
    </div>
    
    0 as noted above. Because the renderer is an
    {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    53, it will automatically detect any changes to its properties and update the map when its associated directions have changed.

The following example calculates directions between two locations on Route 66, where the origin and destination are set by the given

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
54 and
{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
55 values in the dropdown lists. The
{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
9 handles display of the polyline between the indicated locations, and the placement of markers at the origin, destination, and any waypoints, if applicable.

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(result, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(result);
    }
  });
}

In the HTML body:

<div>
<strong>Start: </strong>
<select id="start" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
</div>

View example

The following example shows directions using different modes of travel between the Haight-Ashbury to Ocean Beach in San Francisco, CA:

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var haight = new google.maps.LatLng(37.7699298, -122.4469157);
  var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
  var mapOptions = {
    zoom: 14,
    center: haight
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var selectedMode = document.getElementById('mode').value;
  var request = {
      origin: haight,
      destination: oceanBeach,
      // Note that JavaScript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
      travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request, function(response, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(response);
    }
  });
}

In the HTML body:

<div>
<strong>Mode of Travel: </strong>
<select id="mode" onchange="calcRoute();">
  <option value="DRIVING">Driving</option>
  <option value="WALKING">Walking</option>
  <option value="BICYCLING">Bicycling</option>
  <option value="TRANSIT">Transit</option>
</select>
</div>

View example

A

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
9 not only handles display of the polyline and any associated markers, but also can handle the textual display of directions as a series of steps. To do so, call
{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
58 on your
{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
9, passing it the
{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
1 in which to display this information. Doing so also ensures that you display the appropriate copyright information, and any warnings which may be associated with the result.

Textual directions will be provided using the browser's preferred language setting, or the language specified when loading the API JavaScript using the

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
61 parameter. (For more information, see Localization.) In the case of transit directions, the time will be displayed in the time zone at that transit stop.

The following example is identical to that shown above, but includes a

{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
1 panel in which to display directions:

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
0

In the HTML body:

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
1

View example

The DirectionsResult Object

When sending a directions request to the

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
8, you receive a response consisting of a status code, and a result, which is a
<div>
<strong>Start: </strong>
<select id="start" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
</div>
0 object. The
<div>
<strong>Start: </strong>
<select id="start" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
</div>
0 is an object literal with the following fields:

  • {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    66 contains an array of
    {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    67 objects, each one containing details about the geocoding of origin, destination and waypoints.
  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    2 contains an array of
    {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    69 objects. Each route indicates a way to get from the origin to the destination provided in the
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    5. Generally, only one route is returned for any given request, unless the request's
    {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(Date.now() + N),  // for the time N milliseconds from now.
        trafficModel: 'optimistic'
      }
    }
    
    2 field is set to
    {
      departureTime: Date,
      trafficModel: TrafficModel
    }
    
    9, in which, multiple routes may be returned.

Note: The

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
73 property is deprecated in alternative routes. Version 3.27 is the last version of the API that adds extra via waypoints in alternative routes. For versions 3.28 and higher of the API, you can continue to implement draggable directions using the Directions service by disabling the dragging of alternative routes. Only the main route should be draggable. Users can drag the main route until it matches an alternative route.

Directions Geocoded Waypoints

A

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
67 contains details about the geocoding of origin, destination and waypoints.

The

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
67 is an object literal with the following fields:

  • {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    76 indicates the status code resulting from the geocoding operation. This field may contain the following values.
    • {
        origin: 'Chicago, IL',
        destination: 'Los Angeles, CA',
        waypoints: [
          {
            location: 'Joplin, MO',
            stopover: false
          },{
            location: 'Oklahoma City, OK',
            stopover: true
          }],
        provideRouteAlternatives: false,
        travelMode: 'DRIVING',
        drivingOptions: {
          departureTime: new Date(/* now, or future date */),
          trafficModel: 'pessimistic'
        },
        unitSystem: google.maps.UnitSystem.IMPERIAL
      }
      
      77 indicates that no errors occurred; the address was successfully parsed and at least one geocode was returned.
    • {
        origin: 'Chicago, IL',
        destination: 'Los Angeles, CA',
        waypoints: [
          {
            location: 'Joplin, MO',
            stopover: false
          },{
            location: 'Oklahoma City, OK',
            stopover: true
          }],
        provideRouteAlternatives: false,
        travelMode: 'DRIVING',
        drivingOptions: {
          departureTime: new Date(/* now, or future date */),
          trafficModel: 'pessimistic'
        },
        unitSystem: google.maps.UnitSystem.IMPERIAL
      }
      
      78 indicates that the geocode was successful but returned no results. This may occur if the geocoder was passed a non-existent
      {
        origin: 'Chicago, IL',
        destination: 'Los Angeles, CA',
        waypoints: [
          {
            location: 'Joplin, MO',
            stopover: false
          },{
            location: 'Oklahoma City, OK',
            stopover: true
          }],
        provideRouteAlternatives: false,
        travelMode: 'DRIVING',
        drivingOptions: {
          departureTime: new Date(/* now, or future date */),
          trafficModel: 'pessimistic'
        },
        unitSystem: google.maps.UnitSystem.IMPERIAL
      }
      
      79.
  • {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    80 indicates that the geocoder did not return an exact match for the original request, though it was able to match part of the requested address. You may wish to examine the original request for misspellings and/or an incomplete address.

    Partial matches most often occur for street addresses that do not exist within the locality you pass in the request. Partial matches may also be returned when a request matches two or more locations in the same locality. For example, "Hillpar St, Bristol, UK" will return a partial match for both Henry Street and Henrietta Street. Note that if a request includes a misspelled address component, the geocoding service may suggest an alternative address. Suggestions triggered in this way will also be marked as a partial match.

  • {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    81is a unique identifier of a place, which can be used with other Google APIs. For example, you can use the
    {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    81 with the Google Places API library to get details of a local business, such as phone number, opening hours, user reviews, and more. See the place ID overview.
  • {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    83 is an array indicating the type of the returned result. This array contains a set of zero or more tags identifying the type of feature returned in the result. For example, a geocode of "Chicago" returns "locality" which indicates that "Chicago" is a city, and also returns "political" which indicates it is a political entity.

Directions Routes

Note: The legacy

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
84 object has been renamed
{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
69. Note that a route now refers to the entire start to end journey, rather than simply a leg of a parent trip.

A

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
69 contains a single result from the specified origin and destination. This route may consist of one or more legs (of type
{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
87) depending on whether any waypoints were specified. As well, the route also contains copyright and warning information which must be displayed to the user in addition to the routing information.

The

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
69 is an object literal with the following fields:

  • {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    89 contains an array of
    {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    87 objects, each of which contains information about a leg of the route, from two locations within the given route. A separate leg will be present for each waypoint or destination specified. (A route with no waypoints will contain exactly one
    {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    87.) Each leg consists of a series of
    {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    92s.
  • {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(Date.now() + N),  // for the time N milliseconds from now.
        trafficModel: 'optimistic'
      }
    }
    
    1 contains an array indicating the order of any waypoints in the calculated route. This array may contain an altered order if the
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    5 was passed
    {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    95.
  • {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    96 contains an array of
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    0s that represent an approximate (smoothed) path of the resulting directions.
  • {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    98 contains a single
    {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    99 object that holds an encoded polyline representation of the route. This polyline is an approximate (smoothed) path of the resulting directions.
  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    00 contains a
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    01 indicating the bounds of the polyline along this given route.
  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    02 contains the copyrights text to be displayed for this route.Note: If you do not use the provided
    {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    9 object, you must handle and display this information yourself.
  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    04 contains an array of warnings to be displayed when showing these directions. If you do not use the provided
    {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    9 object, you must handle and display these warnings yourself.
  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    06 contains the total fare (that is, the total ticket costs) on this route. This property is only returned for transit requests and only for routes where fare information is available for all transit legs. The information includes:
    • {
        arrivalTime: Date,
        departureTime: Date,
        modes[]: TransitMode,
        routingPreference: TransitRoutePreference
      }
      
      07: An ISO 4217 currency code indicating the currency that the amount is expressed in.
    • {
        arrivalTime: Date,
        departureTime: Date,
        modes[]: TransitMode,
        routingPreference: TransitRoutePreference
      }
      
      08: The total fare amount, in the currency specified above.

Directions Legs

Note: The legacy

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
69 object has been renamed
{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
87.

A

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
87 defines a single leg of a journey from the origin to the destination in the calculated route. For routes that contain no waypoints, the route will consist of a single "leg," but for routes that define one or more waypoints, the route will consist of one or more legs, corresponding to the specific legs of the journey.

The

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
87 is an object literal with the following fields:

  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    13 contains an array of
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    14 objects denoting information about each separate step of the leg of the journey.
  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    15 indicates the total distance covered by this leg, as a
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    16 object of the following form:

    • {
        arrivalTime: Date,
        departureTime: Date,
        modes[]: TransitMode,
        routingPreference: TransitRoutePreference
      }
      
      08 indicates the distance in meters
    • {
        arrivalTime: Date,
        departureTime: Date,
        modes[]: TransitMode,
        routingPreference: TransitRoutePreference
      }
      
      18 contains a string representation of the distance, which by default is displayed in units as used at the origin. (For example, miles will be used for any origin within the United States.) You may override this unit system by specifically setting a
      {
        origin: 'Chicago, IL',
        destination: 'Los Angeles, CA',
        waypoints: [
          {
            location: 'Joplin, MO',
            stopover: false
          },{
            location: 'Oklahoma City, OK',
            stopover: true
          }],
        provideRouteAlternatives: false,
        travelMode: 'DRIVING',
        drivingOptions: {
          departureTime: new Date(/* now, or future date */),
          trafficModel: 'pessimistic'
        },
        unitSystem: google.maps.UnitSystem.IMPERIAL
      }
      
      18 in the original query. Note that regardless of what unit system you use, the
      {
        arrivalTime: Date,
        departureTime: Date,
        modes[]: TransitMode,
        routingPreference: TransitRoutePreference
      }
      
      20 field always contains a value expressed in meters.

    These fields may be undefined if the distance is unknown.

  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    21 indicates the total duration of this leg, as a
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    22 object of the following form:

    • {
        arrivalTime: Date,
        departureTime: Date,
        modes[]: TransitMode,
        routingPreference: TransitRoutePreference
      }
      
      08 indicates the duration in seconds.
    • {
        arrivalTime: Date,
        departureTime: Date,
        modes[]: TransitMode,
        routingPreference: TransitRoutePreference
      }
      
      18 contains a string representation of the duration.

    These fields may be undefined if the duration is unknown.

  • {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    04 indicates the total duration of this leg, taking into account current traffic conditions. The
    {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    04 is returned only if all of the following are true:

    • The request does not include stopover waypoints. That is, it doesn't include waypoints where
      {
        departureTime: Date,
        trafficModel: TrafficModel
      }
      
      6 is
      {
        departureTime: Date,
        trafficModel: TrafficModel
      }
      
      9.
    • The request is specifically for driving directions—the
      {
        arrivalTime: Date,
        departureTime: Date,
        modes[]: TransitMode,
        routingPreference: TransitRoutePreference
      }
      
      29 is set to
      {
        arrivalTime: Date,
        departureTime: Date,
        modes[]: TransitMode,
        routingPreference: TransitRoutePreference
      }
      
      30.
    • The
      function initMap() {
        var directionsService = new google.maps.DirectionsService();
        var directionsRenderer = new google.maps.DirectionsRenderer();
        var haight = new google.maps.LatLng(37.7699298, -122.4469157);
        var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
        var mapOptions = {
          zoom: 14,
          center: haight
        }
        var map = new google.maps.Map(document.getElementById('map'), mapOptions);
        directionsRenderer.setMap(map);
      }
      
      function calcRoute() {
        var selectedMode = document.getElementById('mode').value;
        var request = {
            origin: haight,
            destination: oceanBeach,
            // Note that JavaScript allows us to access the constant
            // using square brackets and a string value as its
            // "property."
            travelMode: google.maps.TravelMode[selectedMode]
        };
        directionsService.route(request, function(response, status) {
          if (status == 'OK') {
            directionsRenderer.setDirections(response);
          }
        });
      }
      
      0 is included as part of the
      {
        origin: 'Hoboken NJ',
        destination: 'Carroll Gardens, Brooklyn',
        travelMode: 'TRANSIT',
        transitOptions: {
          departureTime: new Date(1337675679473),
          modes: ['BUS'],
          routingPreference: 'FEWER_TRANSFERS'
        },
        unitSystem: google.maps.UnitSystem.IMPERIAL
      }
      
      7 field in the request.
    • Traffic conditions are available for the requested route.

    The

    {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    04 contains the following fields:

    • {
        arrivalTime: Date,
        departureTime: Date,
        modes[]: TransitMode,
        routingPreference: TransitRoutePreference
      }
      
      08 indicates the duration in seconds.
    • {
        arrivalTime: Date,
        departureTime: Date,
        modes[]: TransitMode,
        routingPreference: TransitRoutePreference
      }
      
      18 contains a human-readable representation of the duration.
  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    36 contains the estimated time of arrival for this leg. This property is only returned for transit directions. The result is returned as a
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    37 object with three properties:
    • {
        arrivalTime: Date,
        departureTime: Date,
        modes[]: TransitMode,
        routingPreference: TransitRoutePreference
      }
      
      08 the time specified as a JavaScript
      <div>
      <strong>Start: </strong>
      <select id="start" onchange="calcRoute();">
        <option value="chicago, il">Chicago</option>
        <option value="st louis, mo">St Louis</option>
        <option value="joplin, mo">Joplin, MO</option>
        <option value="oklahoma city, ok">Oklahoma City</option>
        <option value="amarillo, tx">Amarillo</option>
        <option value="gallup, nm">Gallup, NM</option>
        <option value="flagstaff, az">Flagstaff, AZ</option>
        <option value="winona, az">Winona</option>
        <option value="kingman, az">Kingman</option>
        <option value="barstow, ca">Barstow</option>
        <option value="san bernardino, ca">San Bernardino</option>
        <option value="los angeles, ca">Los Angeles</option>
      </select>
      <strong>End: </strong>
      <select id="end" onchange="calcRoute();">
        <option value="chicago, il">Chicago</option>
        <option value="st louis, mo">St Louis</option>
        <option value="joplin, mo">Joplin, MO</option>
        <option value="oklahoma city, ok">Oklahoma City</option>
        <option value="amarillo, tx">Amarillo</option>
        <option value="gallup, nm">Gallup, NM</option>
        <option value="flagstaff, az">Flagstaff, AZ</option>
        <option value="winona, az">Winona</option>
        <option value="kingman, az">Kingman</option>
        <option value="barstow, ca">Barstow</option>
        <option value="san bernardino, ca">San Bernardino</option>
        <option value="los angeles, ca">Los Angeles</option>
      </select>
      </div>
      
      9 object.
    • {
        arrivalTime: Date,
        departureTime: Date,
        modes[]: TransitMode,
        routingPreference: TransitRoutePreference
      }
      
      18 the time specified as a string. The time is displayed in the time zone of the transit stop.
    • {
        arrivalTime: Date,
        departureTime: Date,
        modes[]: TransitMode,
        routingPreference: TransitRoutePreference
      }
      
      41 contains the time zone of this station. The value is the name of the time zone as defined in the IANA Time Zone Database, e.g. "America/New_York".
  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    42 contains the estimated time of departure for this leg, specified as a
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    37 object. The
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    42 is only available for transit directions.
  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    45 contains the
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    0 of the origin of this leg. Because the Directions Web Service calculates directions between locations by using the nearest transportation option (usually a road) at the start and end points,
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    45 may be different than the provided origin of this leg if, for example, a road is not near the origin.
  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    48 contains the
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    0 of the destination of this leg. Because the
    {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    8 calculates directions between locations by using the nearest transportation option (usually a road) at the start and end points,
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    48 may be different than the provided destination of this leg if, for example, a road is not near the destination.
  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    52 contains the human-readable address (typically a street address) of the start of this leg.

    This content is meant to be read as-is. Do not programmatically parse the formatted address.
  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    53 contains the human-readable address (typically a street address) of the end of this leg.

    This content is meant to be read as-is. Do not programmatically parse the formatted address.

Directions Steps

A

{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
14 is the most atomic unit of a direction's route, containing a single step describing a specific, single instruction on the journey. E.g. "Turn left at W. 4th St." The step not only describes the instruction but also contains distance and duration information relating to how this step relates to the following step. For example, a step denoted as "Merge onto I-80 West" may contain a duration of "37 miles" and "40 minutes," indicating that the next step is 37 miles/40 minutes from this step.

When using the Directions service to search for transit directions, the steps array will include additional Transit Specific Information in the form of a

{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
55 object. If the directions include multiple modes of transportation, detailed directions will be provided for walking or driving steps in a
{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
13 array. For example, a walking step will include directions from the start and end locations: "Walk to Innes Ave & Fitch St". That step will include detailed walking directions for that route in the
{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
13 array, such as: "Head north-west", "Turn left onto Arelious Walker", and "Turn left onto Innes Ave".

The

{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
14 is an object literal with the following fields:

  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    59 contains instructions for this step within a text string.
  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    15 contains the distance covered by this step until the next step, as a
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    16 object. (See the description in
    {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    87 above.) This field may be undefined if the distance is unknown.
  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    21 contains an estimate of the time required to perform the step, until the next step, as a
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    22 object. (See the description in
    {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    87 above.) This field may be undefined if the duration is unknown.
  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    45 contains the geocoded
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    0 of the starting point of this step.
  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    48 contains the
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    0 of the ending point of this step.
  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    70 contains a single
    {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    99 object that holds an encoded polyline representation of the step. This polyline is an approximate (smoothed) path of the step.
  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    13 a
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    14 object literal that contains detailed directions for walking or driving steps in transit directions. Sub-steps are only available for transit directions.
  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    74 contains the
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    75 used in this step. Transit directions may include a combination of walking and transit directions.
  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    76 contains an array of
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    77 describing the course of this step.
  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    55 contains transit specific information, such as the arrival and departure times, and the name of the transit line.

Transit Specific Information

Transit directions return additional information that is not relevant for other modes of transportation. These additional properties are exposed through the

{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
79 object, returned as a property of
{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
14. From the
{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
79 object you can access additional information for the
{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
82,
{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
83,
{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
84, and
{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
85 objects as described below.

Transit Details

The

{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
79 object exposes the following properties:

  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    87 contains a
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    82 object representing the arrival station/stop with the following properties:
    • {
        arrivalTime: Date,
        departureTime: Date,
        modes[]: TransitMode,
        routingPreference: TransitRoutePreference
      }
      
      89 the name of the transit station/stop. eg. "Union Square".
    • {
        departureTime: Date,
        trafficModel: TrafficModel
      }
      
      3 the location of the transit station/stop, represented as a
      {
        arrivalTime: Date,
        departureTime: Date,
        modes[]: TransitMode,
        routingPreference: TransitRoutePreference
      }
      
      0.
  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    92 contains a
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    82 object representing the departure station/stop.
  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    36 contains the arrival time, specified as a
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    37 object with three properties:
    • {
        arrivalTime: Date,
        departureTime: Date,
        modes[]: TransitMode,
        routingPreference: TransitRoutePreference
      }
      
      08 the time specified as a JavaScript
      <div>
      <strong>Start: </strong>
      <select id="start" onchange="calcRoute();">
        <option value="chicago, il">Chicago</option>
        <option value="st louis, mo">St Louis</option>
        <option value="joplin, mo">Joplin, MO</option>
        <option value="oklahoma city, ok">Oklahoma City</option>
        <option value="amarillo, tx">Amarillo</option>
        <option value="gallup, nm">Gallup, NM</option>
        <option value="flagstaff, az">Flagstaff, AZ</option>
        <option value="winona, az">Winona</option>
        <option value="kingman, az">Kingman</option>
        <option value="barstow, ca">Barstow</option>
        <option value="san bernardino, ca">San Bernardino</option>
        <option value="los angeles, ca">Los Angeles</option>
      </select>
      <strong>End: </strong>
      <select id="end" onchange="calcRoute();">
        <option value="chicago, il">Chicago</option>
        <option value="st louis, mo">St Louis</option>
        <option value="joplin, mo">Joplin, MO</option>
        <option value="oklahoma city, ok">Oklahoma City</option>
        <option value="amarillo, tx">Amarillo</option>
        <option value="gallup, nm">Gallup, NM</option>
        <option value="flagstaff, az">Flagstaff, AZ</option>
        <option value="winona, az">Winona</option>
        <option value="kingman, az">Kingman</option>
        <option value="barstow, ca">Barstow</option>
        <option value="san bernardino, ca">San Bernardino</option>
        <option value="los angeles, ca">Los Angeles</option>
      </select>
      </div>
      
      9 object.
    • {
        arrivalTime: Date,
        departureTime: Date,
        modes[]: TransitMode,
        routingPreference: TransitRoutePreference
      }
      
      18 the time specified as a string. The time is displayed in the time zone of the transit stop.
    • {
        arrivalTime: Date,
        departureTime: Date,
        modes[]: TransitMode,
        routingPreference: TransitRoutePreference
      }
      
      41 contains the time zone of this station. The value is the name of the time zone as defined in the IANA Time Zone Database, e.g. "America/New_York".
  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    42 contains the departure time, specified as a
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    37 object.
  • {
      origin: 'Hoboken NJ',
      destination: 'Carroll Gardens, Brooklyn',
      travelMode: 'TRANSIT',
      transitOptions: {
        departureTime: new Date(1337675679473),
        modes: ['BUS'],
        routingPreference: 'FEWER_TRANSFERS'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    02 specifies the direction in which to travel on this line, as it is marked on the vehicle or at the departure stop. This will often be the terminus station.
  • {
      origin: 'Hoboken NJ',
      destination: 'Carroll Gardens, Brooklyn',
      travelMode: 'TRANSIT',
      transitOptions: {
        departureTime: new Date(1337675679473),
        modes: ['BUS'],
        routingPreference: 'FEWER_TRANSFERS'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    03 when available, this specifies the expected number of seconds between departures from the same stop at this time. For example, with a
    {
      origin: 'Hoboken NJ',
      destination: 'Carroll Gardens, Brooklyn',
      travelMode: 'TRANSIT',
      transitOptions: {
        departureTime: new Date(1337675679473),
        modes: ['BUS'],
        routingPreference: 'FEWER_TRANSFERS'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    03 value of 600, you would expect a ten minute wait if you should miss your bus.
  • {
      origin: 'Hoboken NJ',
      destination: 'Carroll Gardens, Brooklyn',
      travelMode: 'TRANSIT',
      transitOptions: {
        departureTime: new Date(1337675679473),
        modes: ['BUS'],
        routingPreference: 'FEWER_TRANSFERS'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    05 contains a
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    83 object literal that contains information about the transit line used in this step. The
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    83 provides the name and operator of the line, along with other properties described in the
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    83 reference documentation.
  • {
      origin: 'Hoboken NJ',
      destination: 'Carroll Gardens, Brooklyn',
      travelMode: 'TRANSIT',
      transitOptions: {
        departureTime: new Date(1337675679473),
        modes: ['BUS'],
        routingPreference: 'FEWER_TRANSFERS'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    09 contains the number of stops in this step. Includes the arrival stop, but not the departure stop. For example, if your directions involve leaving from Stop A, passing through stops B and C, and arriving at stop D,
    {
      origin: 'Hoboken NJ',
      destination: 'Carroll Gardens, Brooklyn',
      travelMode: 'TRANSIT',
      transitOptions: {
        departureTime: new Date(1337675679473),
        modes: ['BUS'],
        routingPreference: 'FEWER_TRANSFERS'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    09 will return 3.

Transit Line

The

{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
83 object exposes the following properties:

  • {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    89 contains the full name of this transit line. eg. "7 Avenue Express" or "14th St Crosstown".
  • {
      origin: 'Hoboken NJ',
      destination: 'Carroll Gardens, Brooklyn',
      travelMode: 'TRANSIT',
      transitOptions: {
        departureTime: new Date(1337675679473),
        modes: ['BUS'],
        routingPreference: 'FEWER_TRANSFERS'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    13 contains the short name of this transit line. This will normally be a line number, such as "2" or "M14".
  • {
      origin: 'Hoboken NJ',
      destination: 'Carroll Gardens, Brooklyn',
      travelMode: 'TRANSIT',
      transitOptions: {
        departureTime: new Date(1337675679473),
        modes: ['BUS'],
        routingPreference: 'FEWER_TRANSFERS'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    14 is an array containing a single
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    84 object. The
    {
      arrivalTime: Date,
      departureTime: Date,
      modes[]: TransitMode,
      routingPreference: TransitRoutePreference
    }
    
    84 object provides information about the operator of this line, including the following properties:
    • {
        arrivalTime: Date,
        departureTime: Date,
        modes[]: TransitMode,
        routingPreference: TransitRoutePreference
      }
      
      89 contains the name of the transit agency.
    • {
        origin: 'Hoboken NJ',
        destination: 'Carroll Gardens, Brooklyn',
        travelMode: 'TRANSIT',
        transitOptions: {
          departureTime: new Date(1337675679473),
          modes: ['BUS'],
          routingPreference: 'FEWER_TRANSFERS'
        },
        unitSystem: google.maps.UnitSystem.IMPERIAL
      }
      
      18 contains the phone number of the transit agency.
    • {
        origin: 'Hoboken NJ',
        destination: 'Carroll Gardens, Brooklyn',
        travelMode: 'TRANSIT',
        transitOptions: {
          departureTime: new Date(1337675679473),
          modes: ['BUS'],
          routingPreference: 'FEWER_TRANSFERS'
        },
        unitSystem: google.maps.UnitSystem.IMPERIAL
      }
      
      19 contains the URL for the transit agency.

    Note: If you are rendering transit directions manually instead of using the

    {
      origin: 'Chicago, IL',
      destination: 'Los Angeles, CA',
      waypoints: [
        {
          location: 'Joplin, MO',
          stopover: false
        },{
          location: 'Oklahoma City, OK',
          stopover: true
        }],
      provideRouteAlternatives: false,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(/* now, or future date */),
        trafficModel: 'pessimistic'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    9 object, you must display the names and URLs of the transit agencies servicing the trip results.

  • {
      origin: 'Hoboken NJ',
      destination: 'Carroll Gardens, Brooklyn',
      travelMode: 'TRANSIT',
      transitOptions: {
        departureTime: new Date(1337675679473),
        modes: ['BUS'],
        routingPreference: 'FEWER_TRANSFERS'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    19 contains a URL for this transit line as provided by the transit agency.
  • {
      origin: 'Hoboken NJ',
      destination: 'Carroll Gardens, Brooklyn',
      travelMode: 'TRANSIT',
      transitOptions: {
        departureTime: new Date(1337675679473),
        modes: ['BUS'],
        routingPreference: 'FEWER_TRANSFERS'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    22 contains a URL for the icon associated with this line. Most cities will use generic icons that vary by the type of vehicle. Some transit lines, such as the New York subway system, have icons specific to that line.
  • {
      origin: 'Hoboken NJ',
      destination: 'Carroll Gardens, Brooklyn',
      travelMode: 'TRANSIT',
      transitOptions: {
        departureTime: new Date(1337675679473),
        modes: ['BUS'],
        routingPreference: 'FEWER_TRANSFERS'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    23 contains the color commonly used in signage for this transit. The color will be specified as a hex string such as: #FF0033.
  • {
      origin: 'Hoboken NJ',
      destination: 'Carroll Gardens, Brooklyn',
      travelMode: 'TRANSIT',
      transitOptions: {
        departureTime: new Date(1337675679473),
        modes: ['BUS'],
        routingPreference: 'FEWER_TRANSFERS'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    24 contains the color of text commonly used for signage of this line. The color will be specified as a hex string.
  • {
      origin: 'Hoboken NJ',
      destination: 'Carroll Gardens, Brooklyn',
      travelMode: 'TRANSIT',
      transitOptions: {
        departureTime: new Date(1337675679473),
        modes: ['BUS'],
        routingPreference: 'FEWER_TRANSFERS'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    25 contains a
    {
      origin: 'Hoboken NJ',
      destination: 'Carroll Gardens, Brooklyn',
      travelMode: 'TRANSIT',
      transitOptions: {
        departureTime: new Date(1337675679473),
        modes: ['BUS'],
        routingPreference: 'FEWER_TRANSFERS'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    26 object that includes the following properties:
    • {
        arrivalTime: Date,
        departureTime: Date,
        modes[]: TransitMode,
        routingPreference: TransitRoutePreference
      }
      
      89 contains the name of the vehicle on this line. eg. "Subway."
    • {
        origin: 'Hoboken NJ',
        destination: 'Carroll Gardens, Brooklyn',
        travelMode: 'TRANSIT',
        transitOptions: {
          departureTime: new Date(1337675679473),
          modes: ['BUS'],
          routingPreference: 'FEWER_TRANSFERS'
        },
        unitSystem: google.maps.UnitSystem.IMPERIAL
      }
      
      28 contains the type of vehicle used on this line. See the Vehicle Type documentation for a complete list of supported values.
    • {
        origin: 'Hoboken NJ',
        destination: 'Carroll Gardens, Brooklyn',
        travelMode: 'TRANSIT',
        transitOptions: {
          departureTime: new Date(1337675679473),
          modes: ['BUS'],
          routingPreference: 'FEWER_TRANSFERS'
        },
        unitSystem: google.maps.UnitSystem.IMPERIAL
      }
      
      22 contains a URL for the icon commonly associated with this vehicle type.
    • {
        origin: 'Hoboken NJ',
        destination: 'Carroll Gardens, Brooklyn',
        travelMode: 'TRANSIT',
        transitOptions: {
          departureTime: new Date(1337675679473),
          modes: ['BUS'],
          routingPreference: 'FEWER_TRANSFERS'
        },
        unitSystem: google.maps.UnitSystem.IMPERIAL
      }
      
      30 contains the URL for the icon associated with this vehicle type, based on the local transport signage.

Vehicle Type

The

{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
85 object exposes the following properties:

ValueDefinition
{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
32Rail.
{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
33Light rail transit.
{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
34Underground light rail.
{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
35Above ground light rail.
{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
36Monorail.
{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
37Heavy rail.
{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
38Commuter rail.
{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
39High speed train.
{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
40Bus.
{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
41Intercity bus.
{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
42Trolleybus.
{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
43Share taxi is a kind of bus with the ability to drop off and pick up passengers anywhere on its route.
{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
44Ferry.
{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
45A vehicle that operates on a cable, usually on the ground. Aerial cable cars may be of the type
{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
46.
{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
46An aerial cable car.
{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
48A vehicle that is pulled up a steep incline by a cable. A Funicular typically consists of two cars, with each car acting as a counterweight for the other.
{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
49All other vehicles will return this type.

Inspecting DirectionsResults

The

{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
50 components —
{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
69,
{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
87,
{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
14 and
{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
79 — may be inspected and used when parsing any directions response.

Important: If you are rendering transit directions manually instead of using the

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
9 object, you must display the names and URLs of the transit agencies servicing the trip results.

The following example plots walking directions to certain tourist attractions in New York City. We inspect the route's

{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
14 to add markers for each step, and attach information to an
{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
57 with instructional text for that step.

Note: Since we are calculating walking directions, we also display any warnings to the user in a separate

{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
1 panel.

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
2

In the HTML body:

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
3

View example

Using Waypoints in Routes

Caution: Requests using more than 10 waypoints, or waypoint optimization, are billed at a higher rate. Learn more about how Google Maps Platform products are billed.

As noted within the DirectionsRequest, you may also specify waypoints (of type

{
  departureTime: Date,
  trafficModel: TrafficModel
}
2) when calculating routes using the Directions service for walking, bicycling or driving directions. Waypoints are not available for transit directions. Waypoints allow you to calculate routes through additional locations, in which case the returned route passes through the given waypoints.

A

{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
60 consists of the following fields:

  • {
      departureTime: Date,
      trafficModel: TrafficModel
    }
    
    3 (required) specifies the address of the waypoint.
  • {
      departureTime: Date,
      trafficModel: TrafficModel
    }
    
    6 (optional) indicates whether this waypoint is a actual stop on the route (
    {
      departureTime: Date,
      trafficModel: TrafficModel
    }
    
    9) or instead only a preference to route through the indicated location (
    {
      origin: 'Hoboken NJ',
      destination: 'Carroll Gardens, Brooklyn',
      travelMode: 'TRANSIT',
      transitOptions: {
        departureTime: new Date(1337675679473),
        modes: ['BUS'],
        routingPreference: 'FEWER_TRANSFERS'
      },
      unitSystem: google.maps.UnitSystem.IMPERIAL
    }
    
    64). Stopovers are
    {
      departureTime: Date,
      trafficModel: TrafficModel
    }
    
    9 by default.
Caution: Setting the
{
  departureTime: Date,
  trafficModel: TrafficModel
}
6 to
{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
64 to avoid stopovers results in directions that are very strict in their interpretation of the waypoint. This may result in severe detours on the route or
function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(result, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(result);
    }
  });
}
9 in the response status code if the Directions Service is unable to create directions through that point.

By default, the Directions service calculates a route through the provided waypoints in their given order. Optionally, you may pass

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
95 within the
{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}
5 to allow the Directions service to optimize the provided route by rearranging the waypoints in a more efficient order. (This optimization is an application of the traveling salesperson problem.) Travel time is the primary factor which is optimized, but other factors such as distance, number of turns and many more may be taken into account when deciding which route is the most efficient. All waypoints must be stopovers for the Directions service to optimize their route.

If you instruct the Directions service to optimize the order of its waypoints, their order will be returned in the

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(Date.now() + N),  // for the time N milliseconds from now.
    trafficModel: 'optimistic'
  }
}
1 field within the
<div>
<strong>Start: </strong>
<select id="start" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
</div>
0 object.

The following example calculates cross-country routes across the United States using a variety of start points, end points, and waypoints. (To select multiple waypoints, press Ctrl-Click when selecting items within the list.) Note that we inspect the

{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
73 and
{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
74 to provide us with the text for each route's start and end point.

TypeScript

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
4Note: Read the guide on using TypeScript and Google Maps.

JavaScript

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
5

Limits and Restrictions for Waypoints

The following usage limits and restrictions apply:

  • The maximum number of waypoints allowed when using the Directions service in the Maps JavaScript API is 25, plus the origin and destination. The limits are the same for the Directions API web service.
  • For the Directions API web service, customers are allowed 25 waypoints, plus the origin, and destination.
  • Google Maps Platform Premium Plan customers are allowed 25 waypoints, plus the origin, and destination.
  • Waypoints are not supported for transit directions.

Draggable Directions

Users may modify cycling, walking or driving directions displayed using a

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
9 dynamically if they are draggable, allowing a user to select and alter routes by clicking and dragging the resulting paths on the map. You indicate whether a renderer's display allows draggable directions by setting its
{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
76 property to
{
  departureTime: Date,
  trafficModel: TrafficModel
}
9. Transit directions cannot be made draggable.

When directions are draggable, a user may select any point on the path (or waypoint) of the rendered result and move the indicated component to a new location. The

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
9 will dynamically update to show the modified path. Upon release, a transitional waypoint will be added to the map (indicated by a small white marker). Selecting and moving a path segment will alter that leg of the route, while selecting and moving a waypoint marker (including start and end points) will alter the legs of the route passing through that waypoint.

Because draggable directions are modified and rendered client-side, you may wish to monitor and handle the

{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
79 event on the
{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
9 to be notified when the user has modified the displayed directions.

The following code shows a trip from Perth on the west coast of Australia to Sydney on the east coast. The code monitors the

{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}
79 event to update the total distance of all legs of the journey.

How do I get directions from one location to another?

You can get directions to multiple destinations for all modes of transportation except public transit or flight..
On your computer, open Google Maps..
Click Directions ..
Add a starting point and a destination..
On the left, below the destinations you entered, click Add ..
To add a stop, choose another destination..

Can I trace my own route on Google Maps?

You can trace a path or highlight an area on your map by drawing lines and shapes.

How do I get maps to recognize my address?

Add a new address.
On your Android phone or tablet, open the Google Maps app ..
Tap Contribute Edit map. Fix an address..
Move the map to the center of the building..
Enter the address information..
To submit, tap Post..

How do I enter coordinates into Google Maps?

Enter coordinates to find a place.
On your computer, open Google Maps..
In the search box, enter your coordinates. Here are examples of formats that work: Decimal degrees (DD): 41.40338, 2.17403. Degrees, minutes, and seconds (DMS): 41°24'12.2"N 2°10'26.5"E. Degrees and decimal minutes (DMM): 41 24.2028, 2 10.4418..