Taxi Fare Widget

A widget that provides a simple taxi fare calculation

 
Choose a country to bias towards:
 

to



Time (mins)
Distance (km)
Estimated Fare

Use it Yourself

Download a self-contained HTML page that will load the demo above

Download Taxi Fare Widget

Support and Help

Please note we do not guarantee any support with this taxi fare widget. It is provided as-is and can be used or modified as you see fit. However, we cannot guarantee support while installing and, in particular, modifying it for your own needs. If you wish to get in contact to report an issue, request help (with an understanding there is no guarantees) or discuss custom work to modify it, we would be glad to hear from you.

The top of the Javascript has a number of settings that can be changed to suit your needs:


//--------------Settings--------------------------------
//ISO 3166-1 Alpha-2 country code, use http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
var countrycode="GB"
//Rate per km (number)
var rateperkm=1.5;
//Minimum fare (number)
var minimum_fare=3;
//Currrency Symbol
var currencysymbol="£";
//Avoid motorways / highways? true/false
var avoidHighways=false;
//Avoid toll roads? true/false
var avoidTolls=false;
//Show summary? true/false
var showsummary=false;
//Show Route Map
var showroutemap=true;
//Disclaimer text
var disclaimer="Please be aware this is only an estimated fare and the final price will be quoted on request"
//API Key for map
var apikey="API KEY GOES HERE";
//----------End Settings--------------------------------

Google Maps API Key

You will also need to add your own unique Google Maps API key. You can get a key here : https://developers.google.com/maps/documentation/javascript/get-api-key#key. You then need to add it to the following line in the HTML file :


<script src="https://maps.googleapis.com/maps/api/js?libraries=places,geometry&key=ADD YOUR KEY HERE"></script> 
and also in the settings:


//API Key for map
var apikey="API KEY GOES HERE";

How it Works

Taxi Fare Widget

The two main components used are part of the Google Maps API : google.maps.places.Autocomplete and google.maps.DistanceMatrixService. google.maps.places.Autocomplete is used to transform the From and To textboxes in to a dynamic place finder. google.maps.DistanceMatrixService is used to take the values in the From and To textboxes and convert them in to an estimated driving route. The driving route will then produce a total distance and estimate journey time. With some other parameters such as minimum price and rate per km, the estimated fare can be calculated.

Relevant Links

google.maps.places.Autocomplete class

google.maps.DistanceMatrixService class

Future Updates

  • Pricing based on a rate table
  • Allow user to add details such as name, phone etc...
  • Notification feature (email?)
  • Option to show map of route

Version History

Version 1.0 (25/05/2015)

  • Page created

Version 1.1 (27/07/2015)

  • Bug Fix

Version 2.0 (04/10/2016)

  • Implemented Static Map To Show Route

Version 2.1 (09/10/2016)

  • New option to select country bias before on-page demo

Comments For This Page

Hello, can I have this widget in HTML ? is it possible to customize the fare rates for different cities ?
By Meddy on 23rd October 2017
Can you set a fixed start point?
On 22nd October 2017
Hi Kirsty, we will take your suggestions on board and consider them for any future updates.
By Daft Logic on 11th October 2017
This looks great and the closest to what I have been looking for - just 3 more things I require - Is there a way to add in a stop that will be included in the total calculated price? I would like to be able to enter a promo code to discount the price and also a feature that permits overriding the price. Are any of these variants possible? Thanks in advance.
By Kirsty on 27th September 2017
A. Jones, We have not configured the map to be interactive, only a static image. We may make updates or add new configuration options in future based on feedback from other users.
By Daft Logic on 15th August 2017
This is awesome. Question, how do you make the map movable and not static. It works just fine the way it is but would like to add features!!
By A. Jones on 11th August 2017
Please would it be possible to put in a function to impose the shortest route (shortest distance), as google has a habit of going around the houses and sticking extra miles on. I know that in googles eyes the longer way may be quicker for better roads sometimes, but taxis are obliged to take the shortest route, and in some instances this is loading the price heavily. Please, please, please? Thanks
By Steven on 5th August 2017
I tried to Run this from webserver and it is failing for the image.
Img src for the generated map never displays the static image? It always displays the "image can not be loaded" icon when trying to generate the image. via this: https://maps.googleapis.com/maps/api/staticmap?size=400x400&path=weight:3%7Ccolor:red%7Cenc:' encodeString '&key=' apikey '"


On 2nd April 2017
How can I resolve the following issue.
Img src for the generated map never displays the static image? It always displays the "image can not be loaded" icon when trying to generate the image. via this: https://maps.googleapis.com/maps/api/staticmap?size=400x400&path=weight:3%7Ccolor:red%7Cenc:' encodeString '&key=' apikey '"
On 2nd April 2017
Hi Dale, I don't believe it needs a standard key, just the Google Static Maps API enabled. Are you testing it on your local machine? What happens if it is run on a webserver?
By Daft Logic on 25th November 2016
Img src for the generated map never displays the static image? It always displays the "image can not be loaded" icon when trying to generate the image. via this: https://maps.googleapis.com/maps/api/staticmap?size=400x400&path=weight:3%7Ccolor:red%7Cenc:' encodeString '&key=' apikey '"

I have a standard API key, does this require a PRO key for this functionality?
By Dale Grebey on 23rd November 2016
Jon, we have now added a country bias at the top of this page. This lets you select the countrycode for the on page demo.
By Daft Logic on 9th November 2016
How do I change this to a US map?
By Jon on 5th November 2016
Thanks! Just sent it in.
By Gabriel on 16th October 2016
Gabriel, please contact us via this page : Contact Daft Logic. Thanks.
By Daft Logic on 16th October 2016
Any chance someone can get in touch with me to discuss some custom changes? Would love to talk. Thanks for this widget! Very useful.
By Gabriel on 15th October 2016
Khaled, this has now been added
By Daft Logic on 4th October 2016
Yes, exactly...
By Khaled on 2nd October 2016
Hi, do you mean show the map showing the start point, end point and route?
By Daft Logic on 26th September 2016
hey ! Thank you very much for this widget !
- How to add a map for itinerary ?

thanks
By Khaled on 25th September 2016
Hi, can you get in contact directly and explain what you have installed and how it was installed please? If you have a public website where it is installed, please say this address as well. Please Note : We do not guarantee support and only offer help on a best effort basis.
By Daft Logic on 26th August 2016
hello !
I tried it to many tme its not working I paste my code without any space still not working

On 25th August 2016
after a short time comes error
By Sven on 26th July 2016
I have set prices. The customer has to enter the Pick up and drop off and a set price has to be displayed.
How would one configure this?
By James on 14th May 2016
How can i change the time total to Hours Minutes instead just minutes? Thank You
By Jason on 30th March 2016
Eden, please get in contact directly if you want to discuss custom changes.
By Daft Logic on 8th March 2016
Ok i found the problem i had it under miles instead of mi now is working great thank you for your help.

Now i am trying to figure out how to add additional charges % and also the google maps live on top of calculator.

Thank you bunch
By Eden on 7th March 2016
I changed it to how you put it but i think is something is missing something i did not do right.
And i want to know also if its possible to add the live map on top of the directions same size by choosing different routes like how google has it to pick which route to take. and also how can i also add % before estimate thank you for all your help.

By Eden on 7th March 2016

Hi Eden, please follow these 4 changes to the file taxi-fare-widget.htm :




1) Change <td>Distance (km)</td> to <td>Distance (miles)</td>

2) Change document.getElementById('distance').value=(results[j].distance.value/1000).toFixed(1); to document.getElementById('distance').value=(results[j].distance.value/1609.34).toFixed(1);

3) Change var calc_fare=(results[j].distance.value/1000)*rateperkm;</td> to <td>var calc_fare=(results[j].distance.value/1609.34)*ratepermile;

4) Change var rateperkm=1.5; to var ratepermile=1.5;


By Daft Logic on 7th March 2016
How can i change the km to mph i tried everything switching METRIC to IMPERIAL then also km to mph still calculating in km, can you please specify this would appreciate it.
By Eden on 7th March 2016

30 out of 34 comments shown. See all comments.

Add your own comment below and let others know what you think:

Share This Page

Share this page with others using one of the methods below. Telling others about Daft Logic is good and we appreciate your support!