Animated Route Maps : Version 1

Note : This project has been replaced by Route Maps Version 2

• Easy to create Route Map with Directions.

• Display Google Street View and Bing Birds Eye imagery (where available) for any point along the route.

• Watch an animation of all or part of the journey.

• Many options available to customize the map.

• API documentation.

• Simple to embed the map on your web page.

Update : June 2015

• Routes can contain up to 8 way points.

• The bookmark option allows a temporary route to be bookmarked. You can create temporary routes by dragging and dropping way points along the route.

• The about option displays a link to this page.

• The traffic layer is now optional.


Copy and paste this code into your web page.


Copy and paste this code into your web page.

Link URL

Route Map Settings

Start Address
Destination Address
Via Address
Separate multiple via addresses with commas (maximum of 8)
Travel Mode
Avoid Highways
Avoid Toll Roads
Region Code *

* blank for United States, 'uk' for United Kingdom, 'ca' for Canada, etc.
See Coverage List

Distance Units
Animation Zoom Level
Animation Update Interval ms
Animation Step Distance metres
Animation Timeout seconds
Width px
Height px
Sidebar Width px
Google Map Type
Street View Zoom Level 0 (far) to 4 (near), 2=default
Street View Pegman Control (Top-Left of Map)
Enable Bing Maps Birds Eye
Birds Eye Direction
Draggable Route
Display Bookmark Link
Display About Link
Display Traffic Option
Address Text Box Width px
Header Foreground Colour RGB Value, e.g. 000000
Header Background Colour RGB Value, e.g. FFFFFF
Route Colour RGB Value, e.g.FF0000
Route Width px
Route Opacity between 0 and 1, default = 0.7

User Instructions

  • Click the Play button to start the Street View animation
  • A 'pegman' marker is shown to indicate the current location and heading
  • Click near the route line to move the pegman marker
  • Drag and drop the pegman to set the current location within the route
  • To view another route, enter a new start and destination address then click 'Get Route'


  • The Street View is only updated when street view imagery exists for the current location.
  • The pegman marker can only be moved to a location on the route.
  • Click the Google logo on the map or street view to see the location on This can be used to explore street views not on the route.
  • If draggable routes are selected then the route can be dragged and dropped to add additional waypoints.
  • When a route is altered the pegman marker will move to a point on the new route near to its current location


Use the base url htp:// and add parameters to this url to generate your Route Map.

Parameter Name Parameter Description
saddr Start Address
daddr Destination Address
via Via Address(es). Up to 8 addresses, or coordinates in (lat,lng) format
tm Travel Mode. 0=Driving (default) 1=Walking 2=Bicycling
ah Avoid Highways. 0=No (default), 1=Yes
at Avoid Toll Road. 0=No (default), 1=Yes
region Geocoding Region. Leave blank for United States, 'uk' for United Kingdom, etc.
units Measurement Units. 0=Miles (default) 1=Kilometres
fi Frame Interval. Duration in milliseconds between updates to the pegman marker location. Default = 1500
fs Frame Step. Distance in metres travelled each time the pegman marker moves along the route. Default = 25
z Zoom Level - the zoom level used when the 'Play' button is first clicked. Default = 15
timeout Animation Timeout - number of seconds after which an animation automatically stops. Default = 90
sw Sidebar width in pixels (can be set to zero if no sidebar is required).
maptype Map Type. 0=Road 1=Satellite 2=Hybrid (default) 3=Terrain.
svz Street View Zoom. 0 (Far) to 4 (Near). Default = 2.
svc Default Street View Pegman Control. 0=Off 1=On. Default=0
be Enable Bing Maps Birds Eye View. 0=No 1=Yes
bd Birds Eye View Direction. -1=Auto 0=North 1=East 2=South 3=West
drag Draggable Route. Users can click and drag any part of the route to add waypoints to the route. 0=No (default) 1=Yes.
aw Address Text Box Width in pixels. Default = 250
fgc Header Foreground RGB Colour. Default = 000000
bgc Header Backround RGB Colour. Default = 000000
rc Route RGB Colour. Default = FF0000
rw Route stroke width in pixels. Default = 3
ro Route Opacity, between 0 and 1. Default = 0.7


  • The Route Map embeddable control is available to use on both non-commercial and commercial websites.
  • Include the link to Map Channels somewhere on your webpage which displays the Route Map (this link is included within the embed code).
  • Do not obscure any portion of the Route Map embeddable control.
  • The code is provided 'as is' with no warranty expressed or implied.
  • Use is governed by the Google Maps API terms and conditions.
  • Use is also governed by the Bing Maps API terms and conditions when the Bing Map option is selected.


Map Channels Events  • Map Channels Hotels  • TripGeo  • Team Maps  • Street Cities  • My Maps Plus (c), 2007-2017   Terms