Please note I AM not a programmer, i run my own company. trying to built calculator by myself. I have software background but someone helped me write this code. Its working but not showing the calculations. If someone can reply me with solution or new code that will be great.
@gudads
I have software background but someone helped me write this code. Its working but not showing the calculations. If someone can reply me with solution or new code that will be great
You know you should have just post your code on Daniweb rather than attached it.
maybe browser development tools coul help you finding the error =) lots of error as i use you code =) got find it.
here use this i already modified your code
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<style type="text/css">
.style2
{ height: 88px; }
.style3
{ width: 165px;}
.style5
{ width: 463px;}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
<script type="text/javascript">
function OrginAutoComplete()
{
try
{
var input = document.getElementById('startvalue');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.setTypes('changetype-geocode');
} // end of try
catch (err) {
// alert(err);
} //end of catch
} //ending ORGIN FUNC
function DestAutoComplete()
{
try
{
var input = document.getElementById('endvalue');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.setTypes('changetype-geocode');
}
catch (err) {
// alert(err);
}
}
google.maps.event.addDomListener(window, 'load', OrginAutoComplete);
google.maps.event.addDomListener(window, 'load', DestAutoComplete);
</script>
<script language="javascript" type="text/javascript">
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
function InitializeMap()
{
directionsDisplay = new google.maps.DirectionsRenderer();
var latlng = new google.maps.LatLng(37.794108, -122.39511);
var myOptions =
{
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}; //end of var myoptions
var map = new google.maps.Map(document.getElementById("map"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directionpanel'));
var control = document.getElementById('control');
control.style.display = 'block';
//####################################################################
// Manage the Amount Here
document.getElementById('Rate').value = 3;
// chage the numeric value in order to chanage the Rate( in $)
// ######################################################################
} // end function intializeMAP
function calcRoute()
{
document.getElementById('distance').style.visibility = 'visible';
var rate = document.getElementById('Rate').value;
var start = document.getElementById('startvalue').value;
var end = document.getElementById('endvalue').value;
var request =
{
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}; //end request
directionsService.route(request, function (response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
directionsDisplay.setDirections(response);
document.getElementById('distance').value = (((response.routes[0].legs[0].distance.value) / 1000) / 1.609344).toFixed(2) + "miles";
document.getElementById('Amount').value = "$ " + (((response.routes[0].legs[0].distance.value) / 1000) / 1.609344).toFixed(2) * "rate";
document.getElementById('Time').value = ((response.routes[0].legs[0].duration.value) / 60).toFixed(2) + "minutes";
} // end if
}); //end direction Service
} // end cal route
function Button1_onclick()
{
calcRoute();
} // end function button1
window.onload = InitializeMap;
</script>
<table id ="control">
<tr align=left>
<td valign ="top" colspan="2">
<div id ="map" style="height: 250px; width: 925px;border:1px solid;"> </div>
</td>
</tr>
<tr>
<td class="style5">
</tr>
<table>
<tr>
<td class="style3">From:</td>
<td> <input id="startvalue" type="text" style="width: 250px" /></td>
</tr>
<tr>
<td class="style3">To: </td>
<td><input id="endvalue" type="text" style="width: 250px" /></td>
</tr>
<tr>
<td></td>
<td align ="left" > <input id="Button1" type="button" value="Calculate Fare" onclick="return Button1_onclick()" /> </td>
</tr>
<tr>
<td align ="left" class="style3"> distance: </td>
<td align ="left" class="style3">
<input id="distance" type="text" style="width: 250px; background-color:LightSteelBlue; " readonly="readonly" />
</td>
</tr>
<tr>
<td align ="left" class="style3"> Journey time: </td>
<td align ="left" class="style3">
<input id="Time" type="text" style="width: 250px; background-color:LightSteelBlue; " readonly="readonly" />
</td>
</tr>
<tr>
<td align ="left" class="style3"> Total Amount: </td>
<td align ="left" class="style3">
<input id="Amount" type="text" style="width: 250px; background-color:LightSteelBlue; "readonly="readonly" />
</td>
</tr>
<tr>
<td colspan="2"><b>Note:</b>
<span style="color:Red;font-size:small;"> Rate and Time mentioned here is
<span style="color:Red;font-size:small;"> based </span>on standard driving conditions. The fare may vary based on the route you choose. </span>
</td>
</tr>
<tr>
<td colspan="2">
<input id="Rate" type="text" style="width: 250px;visibility:hidden " />
</td>
</tr>
</table>
<tr>
<td class="style2" valign="top">
<div id ="directionpanel" style="height: 200px;overflow: auto; width:460px;" > </div>
</td>
</tr>
see line 104: document.getElementById('Amount').value = "$ " + (((response.routes[0].legs[0].distance.value) / 1000) / 1.609344).toFixed(2) * "rate";
replace the * to + because you are concatenating a string