Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.

# Thread: Driving distance calculator

1. ## Driving distance calculator

Hello

I am trying to create a driving distance calculator with JavaScript.
The first 2 pull down menus will be used for the list of starting cities and destinations cities.
If you select for instance city3 from the starting cities list and cityD from the desination cities list, you will get the driving destination on a box beneath those 2 lists, like this http://www.convertit.com/Go/Maps/Cal...tance_Calc.ASP
but only in Km.

Could this be done? Could you help me to creati this script, because I am newbie at this field. Just give me an example with two cities on the starting cities list and two cities at the destination cities list. Then I will found my way, based at your example.

I have to say that the URL that I gave you uses a latitude and longitude mechanism in order to calculate the distance between the starting and destination cities. I don’t want this to happen with my script. I want to give the driving distance between cities by myself as I create it.

Thanks in advance
Peter

• This any use?

I hope it's fairly self-explanatory; it's just a multidimensional array basically.

Code:
```<html>
<head>
<title></title>

<script language="JavaScript">
var distances = new Array(5);
distances["London"] = new Array('0','2','3','4','5');
distances["Paris"] = new Array('6','0','8','9','10');
distances["Berlin"] = new Array('11','12','0','14','15');
distances["Moscow"] = new Array('16','17','18','0','20');
distances["Sydney"] = new Array('21','22','23','24','0');

function getDistance(originCity, destCity){
return distances[originCity][destCity];
}

</script>

</head>

<body>

<select id="sOriginCity">
<option value="London">London</option>
<option value="Paris">Paris</option>
<option value="Berlin">Berlin</option>
<option value="Moscow">Moscow</option>
<option value="Sydney">Sydney</option>
</select>

<select id="sDestCity">
<option value="0">London</option>
<option value="1">Paris</option>
<option value="2">Berlin</option>
<option value="3">Moscow</option>
<option value="4">Sydney</option>
</select>

<input type="button" value="Calculate" onClick="alert(getDistance(document.getElementById('sOriginCity').options[document.getElementById('sOriginCity').selectedIndex].value, document.getElementById('sDestCity').options[document.getElementById('sDestCity').selectedIndex].value))">

</body>
</html>```

• Code:
```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en-US">
<head>

<title>Distance Between Cities</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Author" content="James Alarie - jalarie@umich.edu" />
<link rev="made" href="mailto:jalarie@umich.edu" />

<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="expires" content="0" />

<!--
Author:    James Alarie
Company:   University of Michigan - Flint
Address:   Murchie Science Building - 203E
303 E Kearsley St
Flint  MI  48502
United States of America

Telephone: +1-810-762-3394x21
Fax:       +1-810-762-3687
Web Site:  http://spruce.flint.umich.edu/~jalarie/
E-Mail:    jalarie@umich.edu
Comments:  Having said that, I've probably told you more than I know.
-->

</head>

<body background="jaa_bgnd.jpg" bgcolor="#ffffee" text="black"
link="blue" vlink="#800088" alink="red">
<!-- Page Header -->
<center><h1>Distance Between Cities</h1></center>
<hr />

<!-- Content -->
<noscript>
<font color="red">
You must have javascript to make use of this page.
</font>
</noscript>
<script type="text/javascript">
<!-- Hide this code from non-JavaScript browsers
CityList=new Array(
'Flint~fnt~dtm=60~lax=1100',
'Detroit~dtm~fnt=61~lax=1500',
'Los Angeles~lax~fnt=1101~dtm=1599'
);
Out ='';
Out+='    <br \/>\n';
Out+='    <center>\n';
Out+='      <form method="post" action="" onsubmit="return GetDistance()">\n';
Out+='        From:&nbsp;&nbsp;\n';
Out+='        <select name="GoFrom" id="GoFrom">\n';
document.write(Out);
for (ix1=0; ix1<CityList.length; ix1++) {
CL_line=CityList[ix1];
CL_items=CL_line.split(/~/);
Out ='';
Out+='          <option value="'+CL_items[1]+'">'+CL_items[0]+'<\/option\n';
document.write(Out);
}
Out ='';
Out+='        <\/select>\n';
Out+='        &nbsp;&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;\n';
Out+='        <select name="GoTo" id="GoTo">\n';
document.write(Out);
for (ix1=0; ix1<CityList.length; ix1++) {
CL_line=CityList[ix1];
CL_items=CL_line.split(/~/);
Out ='';
Out+='          <option value="'+CL_items[1]+'">'+CL_items[0]+'<\/option\n';
document.write(Out);
}
Out =''
Out+='        <\/select>\n';
Out+='        <br \/><br \/>\n';
Out+='        <input type="submit" value=" Submit " title=" Submit " \/>&nbsp;\n';
Out+='        <input type="reset" value=" Reset " title=" Reset " \/>\n';
Out+='        <br \/><br \/>\n';
Out+='        Distance:&nbsp;&nbsp;\n';
Out+='        <input type="text" name="result" id="result" \/>\n';
Out+='      </form>\n';
Out+='    </center>\n';
document.write(Out);

function GetDistance() {
f1=document.forms[0];                     // abbreviation
FI=f1.GoFrom.selectedIndex;               // the 'from' index
FV=f1.GoFrom.options[FI].value;           // ...code
FT=f1.GoFrom.options[FI].text;            // ...text
TI=f1.GoTo.selectedIndex;                 // the 'to' index
TV=f1.GoTo.options[TI].value;
TT=f1.GoTo.options[TI].text;
if (FV == TV) {                           // short trip!
f1.result.value=0;
return false;
}
CL_line=CityList[FI];
CL_items=CL_line.split(/~/);
for (ix1=2; ix1<CL_items.length; ix1++) {
CL_item=CL_items[ix1];
ix2=CL_item.indexOf('=');
Code=CL_item.substring(0,ix2);
Distance=CL_item.substring(ix2+1);
if (Code == TV) {
f1.result.value=Distance;
return false;
}
}
f1.result.value=FT+' to '+TT+' not found.';
return false;
}
// End hiding -->
</script>

<!-- Page Footer -->
<br clear="all" /><hr />
Written on December 17, 2004, by:&nbsp;
<a href="mailto:jalarie@umich.edu">James Alarie</a>

</body>

</html>```

•

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•