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.

http://www.airporttaxicaboakland.com/taxi-fare-finder.php

Member Avatar for 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.

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:&nbsp;&nbsp;&nbsp;&nbsp; </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:&nbsp;&nbsp; </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:&nbsp;&nbsp; </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

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.