Google Distance API ( How to calculate and display distance between 2 locations)

Ask the community
,
1

Hello, I am working on a clients website and need to develop a quote.

Part of this quote will be determined by the travel distance between two locations: Pickup & Dropoff.

Pickup Address Input is: #addressInput1
Dropoff Address Input is: #addressInput2

1762×671 46.4 KB

Both address inputs have been connected to a google API Key.

1036×220 27 KB

The API is successfully showing address information “powered by google”

830×550 38.1 KB

The Problem:

I cannot figure out how to call this data successfully. I have spent 2 weeks trying my best to research solutions to no avail.

Also, I have triple checked my Google API to ensure my billing is setup and necessary API’s are enabled.

1764×793 94.4 KB

930×188 10.9 KB

Here is the code i have put together referencing the following forum posts:

https://www.wix.com/corvid/forum/community-discussion/google-distance-matrix-api

PAGE CODE:

1346×747 45.6 KB

BACKEND CODE

1472×483 41.6 KB

This is the current error:

1899×848 108 KB

it states I am not using API’s to authenticate requests. But my attempts are being recorded on the google console

1540×641 67.8 KB

also, on my BACKEND CODE:

THE FOLLOWING LINE:

const url = “https://maps.googleapis.com/maps/api/distancematrix/json?origins=Vancouver+BC|Seattle&destinations=San+Francisco|Victoria+BC&” + key;

Im sure would have to be updated, as it is specific to Seattle & San Francisco. But I am not sure what URL to reference for a general location lookup.

I have provided as much details as possible im hopes someone can help me sort through this “kink”.

I would appreciate any and all feedback! Thanks in advance to my Wix Gurus!

1 Like
2

Am looking for the same feature, please share if this is resolved.

3

Hi, I managed to do it. Check my example. Hope this will help you.

4

@mihailatanasov1986 Hi Mihail, thanks for your example.

I tried you example and I got it to work perfectly with “place_id:” data. But I cannot get it to work with a normal address…

Here I show you the code that is working OK, but how has it to be modified to get it to work with a normal address?

FRONT

765×350 31.5 KB

BACKEND

1210×406 37.6 KB

THANKS IN ADVANCE!!!

5

@mihailatanasov1986 i’d appreciate your help in getting this to work? Would you mind helping?

6

Hi, Were you able to come to a solution for this issue?

7

@mihailatanasov1986 how to configure google api ? please tell me