How can i add cost to the distance already calculated? for example £1.20 for every km.
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Ibys Car</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
// Arrays for the origins and destinations inputs
var origins = new Array();
var destinations = new Array();
// Initial query parameters
var query = {
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC
};
// Google Distance Matrix Service
var dms;
// Interval and Limit values for tracking origins groupings (for staying within QUERY_LIMIT)
var originsInterval = 0;
var originsLimit;
// Query Limit - 100 is the non-premier query limit as of this update
var QUERY_LIMIT = 100;
/*
* Updates the query, then uses the Distance Matrix Service
*/
function updateMatrix() {
updateQuery();
dms.getDistanceMatrix(query, function(response, status) {
if (status == "OK") {
populateTable(response.rows);
}else{
alert("There was a problem with the request. The reported error is '"+status+"'");
}
}
);
}
/*
* Generates a table in 'matrix' element for populating dms results
*/
function createTable() {
var table = document.getElementById('matrix');
var tr = addRow(table);
addElement(tr);
for (var j = 0; j < destinations.length; j++) {
var td = addElement(tr);
td.setAttribute("class", "destination");
td.appendChild(document.createTextNode(destinations[j]));
}
for (var i = 0; i < origins.length; i++) {
var tr = addRow(table);
var td = addElement(tr);
td.setAttribute("class", "origin");
td.appendChild(document.createTextNode(origins));
for (var j = 0; j < destinations.length; j++) {
var td = addElement(tr, 'element-' + i + '-' + j);
}
}
}
/*
* Retrieves origins and destinations from textareas and
* determines how to build the entire matrix within query limitations
*/
function getInputs(){
var originsString = document.getElementById('origins').value;
var destinationsString = document.getElementById('destinations').value;
origins = originsString.split("|");
destinations = destinationsString.split("|");
query.destinations = destinations;
originsLimit = Math.floor(QUERY_LIMIT/destinations.length);
if(originsLimit > 25){
originsLimit = 25;
}
}
/*
* Updates the query based on the known sizes of origins and destinations
*/
function updateQuery(){
if(origins.length * destinations.length < QUERY_LIMIT && originsLimit < 25){
query.origins = origins;
originsInterval=1;
}else{
query.origins = origins.slice(originsLimit*originsInterval,originsLimit*(originsInterval+1));
originsInterval++;
}
}
/*
* Initializes the matrix data and pulls the first set of near 100 results
*/
function matrixInit(){
dms = new google.maps.DistanceMatrixService();
getInputs();
createTable();
updateMatrix();
disableButton('initButton');
}
/*
* Accepts rows and populates table content. Error validation is limited to the "ZERO_RESULTS"
* return status. originsLimit and originsInterval are used to find the correct table cell.
*/
function populateTable(rows) {
var elementX;
for (var i = 0; i < rows.length; i++) {
for (var j = 0; j < rows.elements.length; j++) {
elementX = originsLimit*(originsInterval-1) + i;
if(rows.elements[j].status != "ZERO_RESULTS"){
var distance = rows.elements[j].distance.text;
var duration = rows.elements[j].duration.text;
var td = document.getElementById('element-' + elementX + '-' + j);
td.innerHTML = distance + "<br />" + duration;
}else{
var td = document.getElementById('element-' + elementX + '-' + j);
td.innerHTML = "No results available," + "<br />" + "Check your location.";
}
}
}
if(origins.length <= elementX+1){
disableButton('updateButton');
enableButton('clearButton');
}else{
disableButton('updateButton');
setTimeout("enableUpdateButton()",10000);
document.getElementById('updateButton').value="Wait 10 seconds...";
}
}
/*
* Updates the query parameter for unitSystem when the unit select option is changed
*/
function updateUnits() {
switch (document.getElementById("units").value) {
case "km":
query.unitSystem = google.maps.UnitSystem.METRIC;
break;
case "mi":
query.unitSystem = google.maps.UnitSystem.IMPERIAL;
break;
}
updateMatrix();
}
/*
* Adds a row to the provided table element
*/
function addRow(table) {
var tr = document.createElement('tr');
table.appendChild(tr);
return tr;
}
/*
* Adds a cell with provided id to the provided row
*/
function addElement(tr, id) {
var td = document.createElement('td');
if (id) {
td.setAttribute('id', id);
}
tr.appendChild(td);
return td;
}
/*
* Disables a button using the provided elementId
*/
function disableButton(buttonId){
document.getElementById(buttonId).disabled=true;
}
/*
* Enables a button using the provided elementId
*/
function enableButton(buttonId){
document.getElementById(buttonId).disabled=false;
}
/*
* Renames the updateButton and enables it.
*/
function enableUpdateButton(){
enableButton('updateButton');
document.getElementById('updateButton').value="Add more values";
}
/*
* Clears the results table and resets button states
*/
function clearTable(){
var table = document.getElementById('matrix');
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
table.deleteRow(0);
}
originsInterval = 0;
originsLimit = null;
disableButton('clearButton');
enableButton('initButton');
}
</script>
<style>
body {
font-family: sans-serif;
font-size:.8em;
}
#container {
width:100%;
padding:15px;
}
#matrix {
font-size: 15px;
border-collapse: collapse;
}
table, td, th
{
border:1px solid black;
}
.origin,.destination, {
font-weight: bold;
text-align: center;
background-color: #e0ffe0;
}
#instructions {
padding: 10px;
}
#queryInputs{
margin-top: 10px;
}
td {
border: 1px solid grey;
width: 100px;
cursor: default;
background-color: #ffffff;
}
a {
text-decoration: underline;
color: blue;
cursor: pointer;
}
input, select, textarea{
margin: 10px 10px 15px 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="controls">
<a id="instructionsLink" onclick="instructionsShowHide()"></a>
<form id="queryInputs">
Pick Up:<br />
<textarea id="origins" rows="5" cols="50">Swiss Cottage</textarea><br />
Drop Off:<br />
<textarea id="destinations" rows="5" cols="50">Kentish Town</textarea><br />
<input type="button" id="initButton" onClick="matrixInit()" value="Calculate Cost"></button>
<input type="button" id="updateButton" onClick="updateMatrix()" disabled="true" value="Add more values"></button>
<input type="button" id="clearButton" onClick="clearTable()" disabled="true" value="Clear"></button>
</form>
</div>
<table id="matrix"> </table>
</div>
</body>
</html>