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. 




Watch It In-Action


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





Benefits, Features & Use Cases


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


Benefits

  1. Accuracy: Leveraging Google Maps API, the distance calculation is precise, ensuring that the cost estimation is reliable and reflects real-world distances.

  2. User-Friendly: With simple input fields for the start and end locations, users can quickly obtain a cost estimate without any hassle.

  3. Customizable: Administrators can set the cost per KM or mile, allowing for complete control over the pricing model.

  4. Real-time Calculation: As users input the addresses, the calculator provides real-time updates on the estimated cost, enhancing user engagement.

Use Cases

  1. 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.
  2. Travel and Transportation Companies: Travel agencies and taxi services can utilize this element to provide instant quotes for trips between two locations.
  3. Event Planning: Event planners can estimate the cost of transporting goods or personnel between various venues.
  4. Moving Companies: Moving companies can provide accurate quotes for moving services based on the distance between the old and new locations.



How to Activate & Use This Feature



1. Set up your Google API



1. Go to the Google Cloud Console.
 
2. Select or create a project.


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

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

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

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


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


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


9. 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. 


10. Go to Credentials page and copy the API Key

11. 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).





Additional Information



Related Features


FAQs

  • Is it possible to calculate the distance to a fixed location?
    • Yes, it's possible to do that with the Default Setting