Introduction

The Distance-based Cost Element is an innovative feature designed to calculate the cost between two distances, A and B, using Google Maps API. It provides an interactive and straightforward method for users to input their starting and ending locations. The calculator then estimates the cost by multiplying the distance with the cost per kilometer (KM) or mile, as set by the administrator. 

Benefits, Features & Use Cases

Distance-Base Cost is a versatile and essential tool for any business that requires accurate distance-based cost calculations. 

Benefits

Accuracy: Leveraging Google Maps API, the distance calculation is precise, ensuring that the cost estimation is reliable and reflects real-world distances.
User-Friendly: With simple input fields for the start and end locations, users can quickly obtain a cost estimate without any hassle.
Customizable: Administrators can set the cost per KM or mile, allowing for complete control over the pricing model.
Real-time Calculation: As users input the addresses, the calculator provides real-time updates on the estimated cost, enhancing user engagement.

Use Cases

Delivery Services: For businesses that offer delivery, the Distance-based Cost Element can calculate the delivery fee based on the distance between the warehouse and the delivery address.
Travel and Transportation Companies: Travel agencies and taxi services can utilize this element to provide instant quotes for trips between two locations.
Event Planning: Event planners can estimate the cost of transporting goods or personnel between various venues.
Moving Companies: Moving companies can provide accurate quotes for moving services based on the distance between the old and new locations.

Watch It In Action

In this example, you can see how the price changes when the address are selected.

How to Activate & Use This Feature

1. Set up your Google API.

Go to the Google Cloud Console.

Select or create a project.

In the left navigation panel, click on "Library".

Search for "Google Maps JavaScript API" and click on the result.

Click "Enable" to activate the Google Maps JavaScript API for your project.

Repeat steps 4 and 5 for "Places API" and "Distance Matrix API".

Go to "APIs & Services" > "Credentials".

Locate your API key in the list and click on it to view its details.

Under "API restrictions", make sure the Distance Matrix API is included in the list of allowed APIs.

Once you have enabled these APIs, you should be able to use the address autocomplete functionality on your website. 

Go to Credentials page and copy the API Key.



And Paste in Stylish Cost Calculator > Global Settings > Google Maps Settings.



Remember, you also need to make sure your API key is linked to your project and that your API key restriction allows requests from the domain where you are trying to use the API.

To learn more about how to add restrictions to your API so that it can only be used by your website, we recommend you read this article: Restricting API Keys

NOTE: Google offers $200 usage every month for no charge, this is usually enough to cover regular use of the calculator, but remember to monitor your project dashboard to avoid unexpected charges if your site has high traffic. Read more

2. Set up your element

To get started, click on the "+ Add Element" button.



Then, click on the Distance-Based Cost button to add it.

Settings & Options

First, you can set a "Title" for this element, it's gonna be visible on the front.

Second, select the Unit Type (length unit)  you want to use, kilometers (km) and miles (mi) are available.

Add the price per kilometer or per mile, the calculator takes into account the fractions of km/mi for the final calculation (If your price is $2 per kilometer, half a kilometer will be calculated at $1)

On the advanced options, you can set this element to required if you want to force your customers to select an option. You can also disable "Display on Detailed List & PDF" if you want to hide it in the quote.

Finally, you can add a default departure address, this will make your calculator show only one field (arrival).

Frequently Asked Question

Q: Is it possible to calculate the distance to a fixed location?

Yes, it's possible to do that with the Default Setting.

Additional Information

Related Features

Element: Slider
Element: Quantity Input Box

Limitations

Land Routes Only: The Google API only allows you to calculate distances that can be traveled by land or that have a land route available. Otherwise, a message about " No route found between origin and destination " will appear under your distance cost element.

Stripe usage: Due to limitations coming from the stripe API, if Stripe is activated, the distance element units will be rounded since it is not possible for Stripe to calculate units with decimals
Example: 1.5Km -> 2Km, 2500.80 -> 2501Km. Element: Slider

All Elements & Features

Learn more about All Elements
Learn more about All Features

Need Support?

Ask a question or request support
Request a feature or give feedback

Updated on: 05/09/2024