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.
- See
TravelTimeOptions
.
- 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
.
- Returns a google.maps.LatLngBounds object representing a bounding box around the currently displayed traveltime.
- Takes an
origin
(seeTravelTimeOptions
, 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.
- 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
- mode
- origin
- time
- 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.
- See
TravelTimeWidgetOptions
. - These methods return the
TravelTimeWidget
object, to facilitate chaining.
- 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
.
- Returns a google.maps.LatLngBounds object representing a bounding box around the currently displayed traveltime.
- Permanently removes the visualization and the widget from the map.
- Subsequent calls to the
TravelTimeWidget
object will fail.
- 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
- show
- 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.