Distance Calculator with Times

This variant of my distance calculator not only displays the distances between each of your selected cities/locations, it also displays the expected travel time between those locations as well.

The following example displays the distances and times between a few places near Oklahoma City but the script can be easily adapted to work with any locations simply by entering the names of the locations and the distance and times between them into a multi-dimensional array. The script simply requires starting and destination cities to be selected and the distance and time between them will be extracted from the array and displayed.

To insert the time/distance calculator into your page the first thing you need to do is to put the following HTML into the body of your page where you want the calculator to appear. This script is completely unobtrusive except for the id used in the div and you can even change that if you need to by simply amending the value in the line above the array at the bottom of the script.

<div id="f"></div>

You also need to add a small piece of HTML just before the </body> tag to link the Javascript into the page so that the calculator will function.

<script type="text/javascript" src="dist.js"></script>

Next, copy the following JavaScript code and save it in a file called dist.js (which you have just linked into your page. Don't worry about the fact that the cities in the array are not the ones you want, we'll fix that afterwards).


The final step in getting your own custom distance calculator on your web page is to modify the array that is at the bottom of the dist.js file so that it contains your list of cities (or other locations) and the distances between them. To be able to make the required modifications you will need to understand how that complex array structure needs to be arranged in order to work with the script.

There are actually three levels of arrays that are nested inside of one another in building up the structure that we need. The outermost array contains one entry for each city or location.


Each of these entries consists of an array that itself has three entries.


The arrays of distances and times (the third level of the array structure) contains one entry each for each location entry that precedes it in the top level array. These entries are the distances and times (respectively) between this location and each of the preceding locations (starting from the top of the array). As the first location has no entries preceding it this location has no entries in this array. The second location has one location preceding it and so the array has one entry. In the supplied example code the 10 is the distance in miles between Bricktown and Will Rogers Airport (in either direction) and 15 is the expected travel time in minutes.

['Will Rogers Airport',[10],[15]],

Similarly when we look at the third entry in the main array, 11 and 14 are the distance from Bethany to Bricktown and Will Rogers Airport respectively and 18 and 21 are the corresponding expected travel times in minutes. The entries that follow are constructed the same way with each entry having one more value in each of the distances and times arrays than did the line before (since there is now one additional preceding line to give distances and times to).

The entries will be displayed in alphabetical order in the two drop down lists regardless of which order they are entered in the array so you can add the entries in to the array in whichever order is easiest. There is nolimit as to how many locations that you can have in your drop down lists (apart from those imposed by browsers when your page starts to get rediculously large). An extra entry can always be added to the array simply by supplying the distances and times to all of the locations from the new location to those locations already in the array.

With this version of the calculator we so far have the ability to display distances either in Miles or in Kilometres along with the time taken to travel the distance. Simply amend the reference in the form within the script to indicate whether the distances are miles or kilometres.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow