Taxi Fare Calculator Documentation by Najmul Iqbal v1.0

Taxi Fare Calculator

Created: 02/28/2020
By: Najmul Iqbal

Thank you for your interest in my script. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. To download it, please click here. Thanks so much!

Table of Contents

  1. Overview
  2. Features
  3. How To Use?
  4. Video Demo
  5. Configure the API Key

A) Overview - Top

Taxi Fare Calculator is a JavaScript code that calculates taxi fare. Autocomplete has been added so that to make address selection easy. You can also click on a location on the map to get the address instead of typing via keyboard. You can also optimize the path to minimize the travel time and save money. It utilizes Google Places, Geocoding and Directions APIs.

B) Features - Top

  1. It calculates taxi fare.
  2. It also optimizes path for multiple locations to minimize travel time and save money.
  3. It uses the Google Maps Directions API to display directions on the map.
  4. It adds marker on the map on click and uses GeoCoder to get address of that location.
  5. It uses google maps autocomplete for searching a location.
  6. It utilizes the places library.
  7. It uses driving travel mode.
  8. You can display directions with or without optimization as required.
  9. It uses bootstrap responsive UI.

C) How To Use? - Top

  1. Add Locations:

    • Enter location in the Location box.
    • Click the Add Location button to add multiple locations.
    • The first location should be the start location.
    • The last location should be the destination location.
    • You can also click on the map on your desired location to get address of that location. The address will be displayed in the Location text box. First click inside the location box and then click on the desired location on the map.
  2. Path Optimization:

    Check Optimize Path check box if you want to optimize the path. If you want to visit multiple locations and you don't know where to visit first, second and so on, then check this option to display the directions in the proper order so that to minimize your travel time and hence save money.
  3. Remove Location:

    To remove a location, click the cross icon on the right side of the location box.
  4. Calculate Fare:

    Click the Calculate Fare button to calculate fare. This will also display the directions on the map. The fare break down will be displayed in a separate panel (below the locations).
  5. Clearing Locations:

    If you want to clear all locations then click the Reset button and click OK from the confirmation dialog. The form will also be reset.
  6. Get JSON:

    If you want to get JSON of all the locations and fare break down, click Get JSON button.

D) Video Demo - Top

Please click the play button below to view the video demo.

E) Configure the API Key - Top

  1. Go to your developer console.
  2. Generate your Google API Key.
  3. Open index.html page.
  4. Add your key in the following line (replace YOUR_API_KEY with your Google Maps API key).
    <script type="text/javascript" src=""></script>

Once again, thank you so much for your interest in this script. As I said at the beginning, I'd be glad to help you if you have any questions relating to this script. No guarantees, but I'll do my best to assist. If you have a more general question relating to the apps on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Najmul Iqbal

Go To Table of Contents