taxi fare calculation using php with google distance matrix api v2
13,876
I would like to suggest you to go for Google Maps API V3, here is my tested script as per your requirement, and as per your earlier script, I would suggest to go for @Pierre-Francoys Brousse script for rates,
<?php
session_start();
$rate = 2;
$extra = 50;
$fix = 65;
$above = 110;
$next=55;
$min=3;
$cons = 4;
//}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Taxi Fare Calculation using PHP with GOOGLE MAPS API V3</title>
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px;
font-family:tahoma;
font-size:8pt;
}
#total {
font-size:large;
text-align:center;
font-family:Georgia, “Times New Roman”, Times, serif;
color:#990000;
margin:5px 0 10px 0;
font-size:12px;
width:374px;
}
input {
margin:5px 0px;
font-family:tahoma;
font-size:8pt;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
//<![CDATA[
var map = null;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var Australia = new google.maps.LatLng(-25.085599,133.66699);
var mapOptions = {
center : Australia,
zoom : 4,
minZoom : 3,
streetViewControl : false,
mapTypeId : google.maps.MapTypeId.ROADMAP,
zoomControlOptions : {style:google.maps.ZoomControlStyle.MEDIUM}
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
//Find From location
var fromText = document.getElementById('start');
var fromAuto = new google.maps.places.Autocomplete(fromText);
fromAuto.bindTo('bounds', map);
//Find To location
var toText = document.getElementById('end');
var toAuto = new google.maps.places.Autocomplete(toText);
toAuto.bindTo('bounds', map);
//
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directions-panel'));
/*var control = document.getElementById('control');
control.style.display = 'block';
map.controls[google.maps.ControlPosition.TOP].push(control);*/
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
computeTotalDistance(response);
}
});
}
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000;
/*Start Calculating Distance Fair*/
if (10>total){
var cost = <?php echo $fix; ?>;
}
else if (10<total && 20>total)
{
var cost = ((total * <?php echo $rate; ?>) + (<?php echo $extra; ?>));
}
else if (20<total && 30>total)
{
var cost = ((total * <?php echo $rate; ?>) + (<?php echo $next; ?>));
}
else if (30<total && 50>total)
{
var cost = (((total - 30) * <?php echo $cons; ?>) + (<?php echo $above; ?>));
}
else
{
var cost = (((total - 50) * <?php echo $min; ?>) + 130);
}
var fare = cost * 0.11 + cost;
var fare = Math.round(fare*100)/100;
/*Distance Fair Calculation Ends*/
document.getElementById("total").innerHTML = "Total Distance = " + total + " km and FARE = $" + fare;
}
function auto() {
var input = document.getElementById[('start'), ('end')];
var types
var options = {
types: [],
componentRestrictions: {country: ["AUS"]}
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onLoad="initialize()">
<table width="380px" border="2" cellpadding="0" cellspacing="0" bordercolor="#FF9F0F" style="border-collapse:collapse">
<tr>
<td bgcolor="#FFFF99" style="padding:5px;">
<table width="375px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div id="map_canvas" style="width: 374px; height: 300px; border: solid 1px #336699"></div></td>
</tr>
<tr>
<td><div id="form" style="width:374px; text-align:center; border: solid 1px #336699; background:#d1e1e4;">
From:
<input type="text" id="start" size="60px" name="start" placeholder="Enter Location From">
<br />
To:
<input size="60px" type="text" id="end" name="end" placeholder="Enter Destination ">
<input type="button" value="Calculate" onClick="calcRoute();">
<div id="total"></div>
</div></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Author by
Admin
Updated on June 14, 2022Comments
-
Admin almost 2 years
I want to have a taxi fare calculation in my website.
I have the following requirements:
If Google Distance Matrix calculation show following distance kilometers, the rate should go like this:
- From 0 -10km = $65 (fixed price) + 11%
- 10km = $70 + 11%
- 15km = $80 + 11%
- 20km = $90 + 11%
- 25km = $100 + 11%
- 30km = $120 + 11%
- 30km above = $4 / km
I put rate as $2 per km from 10 km above till 30km + $50 extra which result :
if taxi if drived for
- 20km = 20km × $2 + $50 = $90 + 11%
- 21km = 21km × $2 + $50 = $92 + 11%
- 22km = 22km × $2 + $50 = $94 + 11% and so on
but i am dont know to calculate the fixed price of $65 which is the fix rate for below 10 km distance and $120 rate for 30 km and 30km above ie $4/km .
the script i used for Google Distance Matrix is to show $2/km + $50 fix : (I have not added 11% in this script)
<script src="http://maps.google.com/maps?file=api&v=2&key=_MY_API_KEY" type="text/javascript"></script> <?php $rate=2; $extra=50; ?> <script type="text/javascript"> var geocoder, location1, location2, gDir; var map; var gdir; var geocoder = null; var addressMarker; var directionsPanel; var directions; function initialize() { geocoder = new GClientGeocoder(); gDir = new GDirections(); GEvent.addListener(gDir, "load", function() { var drivingDistanceMiles = gDir.getDistance().meters / 1000; var drivingDistanceround = Math.round(drivingDistanceMiles*100)/100; var cost = ((drivingDistanceMiles * <?php echo $rate; ?>) + (<?php echo $extra; ?>)) <?php echo $rate; ?>) + (<?php echo $extra; ?>)) }; */ var fare=cost; var fare = Math.round(fare*100)/100; document.getElementById('results').innerHTML = '<table width="100%" style="border-collapse:collapse; padding-top:3px;"><tr><td rowspan="2" width="35"><img src="images/rates.png"></td><td><strong>Distance: </strong>' + drivingDistanceround + ' Kilemeters</td></tr><tr><td><strong>Estimated Cost: </strong>$ ' + fare + '</td></tr></table>'; }); if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(-33.722626, 150.810585), 10); gdir = new GDirections(map, document.getElementById("directions")); GEvent.addListener(gdir, "load", onGDimrectionsLoad); GEvent.addListener(gdir, "error", handleErrors); } } function setDirections(fromAddress, toAddress, locale) { gdir.load("from: " + fromAddress + " to: " + toAddress); } function showLocation() { geocoder.getLocations(document.forms[0].from.value, function (response) { if (!response || response.Status.code != 200) { alert("Sorry, we were unable to geocode the first address"); } else { location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address}; geocoder.getLocations(document.forms[0].to.value, function (response) { if (!response || response.Status.code != 200) { alert("Sorry, we were unable to geocode the second address"); } else { location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address}; gDir.load('from: ' + location1.address + ' to: ' + location2.address); } }); } }); /////////////////////////////////////////////////////////// var directionsPanel; var directions; directionsPanel = document.getElementById("route"); directions = new GDirections(map, directionsPanel); directions.load("from: "+document.forms[0].from.value+" to: "+document.forms[0].to.value); } </script> </head> <body onload="initialize()" onunload="GUnload()"> <table width="915" border="2" cellpadding="0" cellspacing="0" bordercolor="#FF9F0F" style="border-collapse:collapse"> <tr> <td bgcolor="#FFFF99" style="padding:10px;"><table width="905" border="0" cellspacing="0" cellpadding="0"> <tr> <td><div id="map_canvas" style="width: 914px; height: 480px; border: solid 1px #336699"></div></td> </tr> <tr> <td><div id="form" style="width: 904px; text-align:center; border: solid 1px #336699; background:#d1e1e4;"> <form action="#" onsubmit="document.getElementById('route').innerHTML=''; showLocation(); setDirections(this.from.value, this.to.value); return false;"> <p style="font-family:Tahoma; font-size:8pt;">From: <input id="fromAddress" type="text" onblur="if(this.value=='') this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue) this.value='';" value="Street Name City, State" maxlength="50" size="26" name="from" style="font-family:Tahoma; font-size:8pt;" /> To: <input id="toAddress" type="text" onblur="if(this.value=='') this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue) this.value='';" value="Street Name City, State" maxlength="50" size="26" name="to" style="font-family:Tahoma; font-size:8pt;"/> <input class="submit" name="submit" type="submit" value="Calculate" style="font-family:Tahoma; font-size:8pt;" /> </p> <div id="results" style="font-family:Tahoma; font-size:8pt; text-align:left; padding-left:5px; padding-bottom:5px;"></div> <div id="route" style="font-family:Tahoma; font-size:8pt; text-align:left; padding-left:5px; padding-bottom:5px;"></div> </form> </div></td> </tr> </table></td> </tr> </table> </body> -
Nuno Sarmento almost 9 years@roshanthapa your code is supreme, do you have any idea do make it with miles ?
