Walk Score Professional

« Travel Time API Overview

Use the Travel Time JavaScript API to easily add a Travel Time Widget to your map, or make client-side requests for travel times between an origin and a set of destinations.

Sample Code

Calls to the Travel Time JavaScript API are made using JavaScript.

To make server-side requests, see the Travel Time HTTP API.

Loading the Library

Include the Travel Time API script in your page. You must include your Walk Score ID as a parameter in the script tag. Contact us for a Walk Score ID.

<script type="text/javascript"
  src="//apicdn.walkscore.com/api/v1/traveltime/js?wsid=YOUR-WSID-HERE">
</script>
        

To instead load the travel time widget, include the following script in your page.

<script type="text/javascript"
  src="//apicdn.walkscore.com/api/v1/traveltime_widget/js?wsid=YOUR-WSID">
</script>
        

walkscore.TravelTime class

Constructor

Optionally takes TravelTimeOptions object, as defined below.

Methods

setOptions
  • Takes a TravelTimeOptions object, as defined below.
setMap, setMode, setOrigin, setTime, setColor.
  • See TravelTimeOptions.
getMap, getMode, getOrigin, getTime, getColor.
  • Origin is returned as comma-separated string, even if set with google.maps.LatLng.
  • Color is returned as RGB, rgb(XXX,XXX,XXX), even if set with hexadecimal, #XXXXXX.
getBounds
  • Returns a google.maps.LatLngBounds object representing a bounding box around the currently displayed traveltime.
prepareOrigin
  • Takes an origin (see TravelTimeOptions, below).
  • Prepares the origin for display, and emits ready event when ready.
  • Requires mode to already be set.
  • Useful for quickly activating traveltimes at one or more locations in interactive web apps.
on
  • Takes TravelTimeEvent (see below), and a callback function.

Note: All methods except getXXX return the TravelTime object, to facilitate chaining.

TravelTimeOptions object

A vanilla object with the following supported keys:

Key Description
map A Google maps object.
mode A travel mode from walkscore.TravelTime.Mode (see below).
origin A lat/lng, either as comma-separated string or google.maps.LatLng object.
destinations An array of lat/lngs, either as comma-separated strings or google.maps.LatLng objects.
time A travel time, in minutes.
congestion A boolean value indicating whether to calculate 'drive' times at peak rush hour.
color A border color string, either as rgb(XXX,XXX,XXX) or #XXXXXX.

TravelTimeEvent callbacks

Event tags are strings. Callbacks are passed objects as follows:

ready
  • mode
  • origin
show
  • mode
  • origin
  • time
times
  • mode
  • origin
  • travel_times (array of objects)
    • destination
    • seconds (if routable)
    • unroutable (if not routable)

error (if something goes wrong, useful for debugging)

The travel time API can only route trips taking less than 60 minutes. Longer trips will report as "unroutable".

walkscore.TravelTime.Mode

Object enumerating supported travel modes:

  • WALK
  • BIKE
  • DRIVE
  • TRANSIT

Example: Getting Travel Times

Getting travel times with the JavaScript API is straightforward. The snippet below gets the walk times from an origin to three destinations and logs the result in the JavaScript console.

var traveltime = new walkscore.TravelTime({
  mode         : walkscore.TravelTime.Mode.WALK,
  origin       : '47.61460,-122.31704',
  destinations : ['47.61512,-122.32043', '47.61387,-122.32124',
                  '47.61506,-122.32767']
});
traveltime.on('times', function(data){
  // Pretty print the results.
  console.log(JSON.stringify(data, null, 2));
});
        

When run in a page, the snippet above logs the following.

{
  "origin": "47.61460,-122.31704",
  "mode": "walk",
  "travel_times": [
    {
      "seconds": 252,
      "destination": "47.61512,-122.32043"
    },
    {
      "seconds": 268,
      "destination": "47.61387,-122.32124"
    },
    {
      "seconds": 670,
      "destination": "47.61506,-122.32767"
    }
  ]
}
        

walkscore.TravelTimeWidget class

Constructor

Optionally takes TravelTimeWidgetOptions object, as defined below.

Methods

setOptions
  • Takes a TravelTimeWidgetOptions object, as defined below.
  • Note: this and all other "set" methods are only available after the ready event has fired. See the on method below for how to listen for events.
setColor, setCongestion, setMap, setMode, setOrigin, setShow, setTime
  • See TravelTimeWidgetOptions.
  • These methods return the TravelTimeWidget object, to facilitate chaining.
getColor, getCongestion, getMap, getMode, getOrigin, getShow, getTime
  • Origin is returned as comma-separated string, even if set with google.maps.LatLng.
  • Color is returned as RGB, rgb(XXX,XXX,XXX), even if set with hexadecimal, #XXXXXX.
getBounds
  • Returns a google.maps.LatLngBounds object representing a bounding box around the currently displayed traveltime.
destroy
  • Permanently removes the visualization and the widget from the map.
  • Subsequent calls to the TravelTimeWidget object will fail.
on
  • Takes TravelTimeWidgetEvent (see below), and a callback function.

TravelTimeWidgetOptions object

A vanilla object with the following supported keys:

Key Description
color A border color string, either as rgb(XXX,XXX,XXX) or #XXXXXX.
congestion Whether to use congestion data in drive mode; Boolean.
map A Google maps object.
mode A travel mode from walkscore.TravelTime.Mode (described above).
origin A lat/lng, either as comma-separated string or google.maps.LatLng object.
show Visibility of the visualization; Boolean.
time A travel time, in minutes.

TravelTimeWidgetEvent callbacks

Event tags are strings. Callbacks are passed objects as follows:

ready (the widget's various "set" methods aren't available until this event fires)

congestion_changed
  • congestion
mode_changed
  • mode
show_changed
  • show
time_changed
  • time

error (if something goes wrong, useful for debugging)

Example: Adding the Travel Time Widget

var map = new google.maps.Map(
  document.getElementById("map_container"),
  {
    mapTypeId : google.maps.MapTypeId.ROADMAP,
    center    : new google.maps.LatLng(47.61460,-122.31704),
    zoom      : 13
  }
);
var widget = new walkscore.TravelTimeWidget({
  map    : map,
  origin : '47.61460,-122.31704'
  show   : true,
  mode   : walkscore.TravelTime.Mode.DRIVE
});
       

Example: Visualizing Travel Times

var map = new google.maps.Map(
  document.getElementById("map_container"),
  { mapTypeId: google.maps.MapTypeId.ROADMAP }
);
var traveltime = new walkscore.TravelTime({
  map    : map,
  mode   : walkscore.TravelTime.Mode.WALK,
  time   : 15,
  origin : '47.61460,-122.31704',
  color  : '#0000FF'
});
traveltime.on('show', function(){
  map.fitBounds(traveltime.getBounds());
});
       

Contact us for tech support.