I would like to add a driving distance calculator from my location to a user inputed location

I want customers to calculate their travel fee by inputting their address. This address would be routed from our office location and the resulting drive time would be multiplied by an hourly rate resulting in their travel fee.

We do have a widget that calculate the driving distance.

https://widgets.jotform.com/widget/driving_distance

Checked your form and it seems you have already added the widget in your form.

However, it seems the widget is not working correctly.

Kindly add your Google Map API key for the widget to work.

To get the key, you can go to this link:https://developers.google.com/maps/documentation/javascript/get-api-key

Hope this information helps.

I'm still having trouble with it. I would like my users to input their address without seeing the originaating address, then have their address copied to the "to" address. The I want to use the output of miles and hours to be used in calculations like strings. Is that possible? 

Heres what i have so far:

https://form.jotform.com/92821331857157

You can hide the originating address of the Drivers Distance widget by adding the following CSS code to the widget's Custom CSS tab:

input#ddFrom {

    display: none;

}

How to Inject CSS Codes to Widgets

It is not possible to pass the data from the Address filed to the Driving Distance widget. Your users will need to enter the address directly inside of the widget. 

To perform a calculation please check this guide:

How to Perform Form Calculation Using a Widget

Thank you!

Managed to hide the initial location, but now I cant get the widget to work. I put my api key in from google maps, but still won't work... says the page can't load google maps correctly.

Also, I'm wondering how I can access the output data (drive time & mileage) in my form calculation?

I checked, but you still do not have the key there. Kindly double check that.

I've cloned your form and can get it to work there with my API: https://form.jotform.com/92826494831972. That means you are only missing the API key, and it should work after. 

Put my API in, but its still not working, any ideas? https://www.jotform.com/build/92826977587178

Hello,

I checked your form and checked the console logs while in Preview mode. It shows that the API key is invalid or showing "Invalid Key Map Error". 

Please generate a new API key and replace it as stated below.

For your reference: https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error

Let us know if the issue still persists. 

Got it figured out, thanks everyone for all your help!