Taxi Fare Widget

A widget that provides a simple taxi fare calculation

Due to significant price increases we can no longer offer all functionally. You may find some functions are no longer available or have limitations in use

Choose a country to bias towards:

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

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

Someone asked if you can set a fixed point - YES. In the 'from' input field html, change the 'value' to the fixed point address, then change the input 'type' to 'hidden', then you have only one input field available to the user for the destination from that fixed point address.
By Steven on 10th July 2021

Hi Guys. Could you add a 'waypoint' to this widget, as in a stop en route?
By Steven on 15th November 2020

Hi Guys - For me, the next level would be for this to be able to have additional stops (pref more than one), are you willing to put this in? I have been using this script of yours for some time now and think it is fantastic. The reason I ask is because most taxi journeys are not from our base to another point, so often there is dead mileage to consider, so having stops to allow for this would give more appropriate pricing. Please, please, please?
By Steven on 28th July 2020

Hi, what have you tried to fix it? What are the errors/problems?
By Daft Logic on 6th November 2018

The Map is not working. how can we fix this please
On 25th July 2018

Grat Job! Thank You.
By Jaspal on 8th April 2018

Jeroen - your point is noted, thanks. It isn't easy to use a mode with shortest distance as #1 priority rather than time. Routing engines are defaulted to time so it takes effort to break out of this mode. Investigations will be made, but to set expectations this could be tricky...
By Daft Logic on 18th January 2018

Hi,

This is so great ... if only there was a way to get the shortest distance!
Just like Steven said earlier, Taxis are obliged to take the shortest route..
Has anyone figured out how to change this?
Thanks a lot!
By Jeroen on 18th January 2018

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

20 out of 42 comments shown. See all comments.

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