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 0 Light Poster
{\rtf1\ansi\ansicpg1252\cocoartf949\cocoasubrtf540
{\fonttbl\f0\froman\fcharset0 Times-Roman;}
{\colortbl;\red255\green255\blue255;}
\margl1440\margr1440\vieww9000\viewh8400\viewkind0
\deftab720
\pard\pardeftab720\ql\qnatural
\f0\fs24 \cf0 \'a0<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>\
\
\'a0 \'a0\'a0<style type="text/css">\
\'a0 \'a0 \'a0 \'a0\'a0.style2\
\'a0 \'a0 \'a0 \'a0 \'a0\{ height: 88px; \}\
\'a0 \'a0 \'a0 \'a0\'a0.style3\
\'a0 \'a0 \'a0 \'a0\'a0\{ width: 165px;\}\
\'a0 \'a0 \'a0 \'a0\'a0.style5\
\'a0 \'a0 \'a0 \'a0\'a0\{ width: 463px;\}\
\'a0 \'a0\'a0</style>\
\
\'a0 \'a0\'a0<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"\
\'a0 \'a0 \'a0 \'a0\'a0type="text/javascript"></script>\
\
\'a0 \'a0\'a0<script type="text/javascript">\
\'a0 \'a0 \'a0 \'a0 \'a0\'a0function OrginAutoComplete() \
\'a0 \'a0 \'a0 \'a0 \'a0\'a0\{\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0try \
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0\{\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0var input = document.getElementById('startvalue');\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0var autocomplete = new google.maps.places.Autocomplete(input);\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0autocomplete.setTypes('changetype-geocode');\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0\} // end of try\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0catch (err) \{\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0// alert(err);\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0\} //end of catch\
\'a0 \'a0 \'a0 \'a0 \'a0\'a0\} //ending ORGIN FUNC\
\
\
\'a0 \'a0 \'a0 \'a0\'a0function DestAutoComplete()\
\'a0 \'a0 \'a0 \'a0 \'a0\{\
\'a0 \'a0 \'a0 \'a0 \'a0\'a0try\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0\{\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0var input = document.getElementById('endvalue');\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0var autocomplete = new google.maps.places.Autocomplete(input);\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0autocomplete.setTypes('changetype-geocode');\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0\}\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0catch (err) \{\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0// alert(err);\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0\}\
\'a0 \'a0 \'a0 \'a0 \'a0\'a0\}\
\
\'a0 \'a0 \'a0 \'a0\'a0google.maps.event.addDomListener(window, 'load', OrginAutoComplete);\
\'a0 \'a0 \'a0 \'a0\'a0google.maps.event.addDomListener(window, 'load', DestAutoComplete);\'a0\'a0\
\'a0 \'a0\
\'a0 \'a0\'a0</script> \
\'a0\
\
\
<script language="javascript" type="text/javascript">\
\'a0 \'a0\'a0var directionsDisplay;\
\'a0 \'a0\'a0var directionsService = new google.maps.DirectionsService();\
\
\'a0 \'a0\'a0function InitializeMap() \
\'a0 \'a0\'a0\{\
\'a0 \'a0 \'a0 \'a0\'a0directionsDisplay = new google.maps.DirectionsRenderer();\
\'a0 \'a0 \'a0 \'a0\'a0var latlng = new google.maps.LatLng(37.794108, -122.39511);\
\'a0 \'a0 \'a0 \'a0\'a0\
\'a0 \'a0 \'a0 \'a0\'a0var myOptions =\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0\{\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0zoom: 8,\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0center: latlng,\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0mapTypeId: google.maps.MapTypeId.ROADMAP\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0\}; //end of var myoptions\
\'a0 \'a0 \'a0\'a0\
\'a0 \'a0 \'a0 \'a0\'a0var map = new google.maps.Map(document.getElementById("map"), myOptions);\
\
\'a0 \'a0 \'a0 \'a0\'a0directionsDisplay.setMap(map);\
\'a0 \'a0 \'a0 \'a0\'a0directionsDisplay.setPanel(document.getElementById('directionpanel'));\
\
\'a0 \'a0 \'a0 \'a0\'a0var control = document.getElementById('control');\
\'a0 \'a0 \'a0 \'a0\'a0control.style.display = 'block';\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0//####################################################################\
\'a0 \'a0 \'a0 \'a0 \'a0\'a0//\'a0 \'a0 \'a0Manage the Amount Here\
\'a0 \'a0 \'a0 \'a0\'a0document.getElementById('Rate').value = 3;\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0// chage the numeric value in order to chanage the Rate( in $)\
\
\'a0 \'a0 \'a0 \'a0// ######################################################################\
\'a0 \'a0\'a0\}\'a0\'a0// end function intializeMAP\
\
\
\
\'a0 \'a0\'a0function calcRoute()\
\'a0 \'a0 \'a0\'a0\{\
\'a0 \'a0 \'a0 \'a0 \'a0document.getElementById('Distance').style.visibility = 'visible';\
\'a0 \'a0 \'a0 \'a0\'a0\
\'a0 \'a0 \'a0 \'a0\'a0var rate = document.getElementById('Rate').value;\
\'a0 \'a0 \'a0 \'a0\'a0var start = document.getElementById('startvalue').value;\
\'a0 \'a0 \'a0 \'a0\'a0var end = document.getElementById('endvalue').value;\
\'a0 \'a0 \'a0 \'a0\'a0\
\'a0 \'a0 \'a0 \'a0\'a0var request = \
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0\{\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0origin: start,\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0destination: end,\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0travelMode: google.maps.DirectionsTravelMode.DRIVING\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0\};\'a0 \'a0//end request\
\'a0 \'a0 \'a0\'a0\
\'a0 \'a0 \'a0 \'a0\'a0directionsService.route(request, function (response, status) \
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0\{\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0if (status == google.maps.DirectionsStatus.OK) \
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0\{\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0directionsDisplay.setDirections(response);\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0document.getElementById('Distance').value = (((response.routes[0].legs[0].distance.value) / 1000) / 1.609344).toFixed(2) + "miles";\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0document.getElementById('Amount').value = "$ " + (((response.routes[0].legs[0].distance.value) / 1000) / 1.609344).toFixed(2) * "rate";\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0document.getElementById('Time').value = ((response.routes[0].legs[0].duration.value) / 60).toFixed(2) + "minutes";\
\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0\} // end if\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0\}\'a0\'a0//end direction Service\
\
\'a0 \'a0 \'a0 \'a0 \'a0\'a0\} // end cal route\
\
\
\
\'a0 \'a0\'a0function Button1_onclick() \
\'a0 \'a0 \'a0 \'a0 \'a0\'a0\{\
\'a0 \'a0 \'a0 \'a0\'a0calcRoute();\
\'a0 \'a0 \'a0 \'a0 \'a0\'a0\}\'a0\'a0// end function button1\
\
\'a0 \'a0 \'a0\'a0window.onload = InitializeMap;\
\'a0 \'a0\'a0\
</script>\'a0\'a0\
\
<table id ="control">\'a0\'a0\
\'a0 \'a0\'a0<tr align=left>\
\'a0 \'a0 \'a0 \'a0\'a0<td valign ="top" colspan="2">\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0<div id ="map" style="height: 250px; width: 925px;border:1px solid;"> </div>\
\'a0 \'a0 \'a0 \'a0\'a0</td> \
\'a0 \'a0\'a0</tr>\
\
\'a0 \'a0 \'a0\'a0<tr>\'a0\'a0\
\'a0 \'a0 \'a0\'a0<td class="style5">\
\'a0 \'a0 \'a0 \'a0\'a0</tr>\'a0\'a0\
\
\'a0 \'a0 \'a0\'a0<table> \
\'a0 \'a0 \'a0 \'a0 \'a0\'a0<tr>\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0<td class="style3">From:</td>\
\'a0 \'a0 \'a0 \'a0 \'a0 \'a0 \'a0\'a0<td> <input id="startvalue" type="text" style="width: 250px" /></td>\
\'a0 \'a0 \'a0 \'a0 \'a0\'a0</tr>\
\'a0\'a0\
\'a0 \'a0 \'a0\'a0<tr>\
\'a0 \'a0 \'a0 \'a0\'a0<td class="style3">To: </td>\
\'a0 \'a0 \'a0 \'a0\'a0<td><input id="endvalue" type="text" style="width: 250px" /></td>\
\'a0 \'a0 \'a0\'a0</tr>\
\'a0 \'a0 \'a0\'a0\
\'a0 \'a0 \'a0\'a0<tr>\
\'a0 \'a0 \'a0 \'a0\'a0<td></td>\
\'a0 \'a0<td align ="left" > <input id="Button1" type="button" value="Calculate Fare" onclick="return Button1_onclick()" /> </td>\
\'a0 \'a0 \'a0</tr>\
\
\'a0<tr>\
\'a0 \'a0\'a0<td align ="left" class="style3"> Distance: </td>\
\
\'a0 \'a0 \'a0<td align ="left" class="style3">\
\'a0 \'a0 \'a0<input id="distance" type="text" style="width: 250px; background-color:LightSteelBlue; " readonly="readonly" />\
\'a0 \'a0 \'a0</td>\
\'a0</tr>\
\
<tr>\
\'a0<td align ="left" class="style3"> Journey time: </td>\
\
\'a0 \'a0<td align ="left" class="style3">\
\'a0 \'a0<input id="Time" type="text" style="width: 250px; background-color:LightSteelBlue; " readonly="readonly" />\
\'a0 \'a0</td>\
</tr>\
\
\'a0<tr>\
\'a0 \'a0 \'a0<td align ="left" class="style3"> Total Amount: </td>\
\'a0 \'a0 \'a0<td align ="left" class="style3">\
\'a0 \'a0 \'a0<input id="Amount" type="text" style="width: 250px;\'a0\'a0background-color:LightSteelBlue; "readonly="readonly"\'a0\'a0/>\
\'a0 \'a0 \'a0</td>\
\'a0</tr>\
\
\'a0<tr>\
\'a0 \'a0<td colspan="2"><b>Note:</b>\
\'a0 \'a0<span style="color:Red;font-size:small;"> Rate and Time mentioned here is\
\'a0 \'a0<span style="color:Red;font-size:small;"> based </span>on standard driving conditions. The fare may vary based on the route you choose. </span>\
\'a0 \'a0</td>\
</tr>\
\
\'a0<tr>\
\'a0 \'a0<td colspan="2">\
\'a0 \'a0<input id="Rate" type="text" style="width: 250px;visibility:hidden " />\
\'a0 \'a0</td>\
\'a0</tr>\
\
\'a0 \'a0 \'a0\'a0</table> \
\'a0 \'a0 \'a0\'a0<tr>\
\'a0 \'a0 \'a0 \'a0 \'a0<td class="style2" valign="top">\
\'a0 \'a0 \'a0 \'a0 \'a0<div id ="directionpanel"\'a0\'a0style="height: 200px;overflow: auto; width:460px;" > </div>\
\'a0 \'a0 \'a0 \'a0 \'a0</td>\
\'a0 \'a0 \'a0</tr>\
\'a0 \'a0 \'a0 \'a0\
\
}
Edited by gudads
LastMitch
@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.
code739 17 Posting Whiz in Training
maybe browser development tools coul help you finding the error =) lots of error as i use you code =) got find it.
Edited by code739
code739 17 Posting Whiz in Training
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>
code739 17 Posting Whiz in Training
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
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.