Hi, i’m trying to get google distance matrix api to calculate distance between two addresses that were put in by the user, but I’m getting “failed to fetch” message. Could you please help? Below are the codes that I used.
const googleDisUrl = "https://maps.googleapis.com/maps/api/distancematrix/json";
const DistanceUrl = googleDisUrl + "&origins=" + $w("#PickupAddress").value + "&destinations=" + $w("#DropoffAddress").value + "&key=" + googleAPIKey;
fetch(DistanceUrl, {method: 'get'}, *20000* )
.then( (httpResponse) => {
if (httpResponse.ok) {
return httpResponse.json();
}
})
.then(json => {
return json.rows[0].elements[0].distance["text"];
})
.catch(err => console .log(err));
2 Likes
Hi Kwanghoon,
I believe it’s because you need a ? for the query in the URL.
I think that &origins= should be ?origins=
Let me know if that works.
Have fun,
Yisrael
Thanks for point it out, but it is still giving me the same error message
Please post a full URL except for your API key. I’ll try it myself using my own key.
Thanks
Do you mean posting the full script or URL of the website? The site is not published yet.
Input addresses used were {“PickupAddress”:“washington,dc”,“DropoffAddress”:“newyork,ny”}
When I call the google map distance matrix api on the browser using the same input, I get the correct response (https://maps.googleapis.com/maps/api/distancematrix/json?origins=washington,%20dc&destinations=new%20york,%20ny&key= )
So, it must be something with the script?
OK, this is what I was able to get working…
I put this in a backend file called gapi.jsw.
import {fetch} from 'wix-fetch';
export function distance() {
const key = [API-KEY];
const url = "https://maps.googleapis.com/maps/api/distancematrix/json?origins=Vancouver+BC|Seattle&destinations=San+Francisco|Victoria+BC&" + key;
return fetch (url, {method: 'get'}).then( (httpResponse) => {
if (httpResponse.ok) {
console.log("OK");
return httpResponse.json();
}
})
}
The URL is the example given on the Google site.
Then from the code on my Page:
import {distance} from 'backend/gapi';
$w.onReady(function () {
distance().then(function(resp) {
console.log(resp);
});
.......
});
This works and I get the json results.
Have fun,
Yisrael
How do you create backend jsw file and where do you put them? If there are resources that show how this is done, it would be helpful!
To find out about creating backend files, read the article Working with the Site Structure Sidebar . Look under the heading Backend for details. Also, the article Calling Server-side Code from the Front-end with Web Modules will be quite helpful for what you’re trying to do.
Using Web Modules (server-side, or backend code) has the added advantage that your API-KEY is hidden from view since it’s in code that sits on the server. If it was in the client code, the user could view the code source and see your key.
Great, it’s working now. Thanks a lot!
Oh wow! I have a Google API key … now I want to try it also 
Wow - glad it’s working. That means I actually did something today. 
Oh yes … cause you ‘never’ do anything
hehehehehehe
Hi Yisrael, are u there? need some advice on how to add a google maps route calculator form with price etc for my taxi website
Hi Metrotaxis,
You can refer to Google’s documentation regarding this feature here
To learn how to access 3rd party services with Wix Code checkout the solution in this thread or in the article below
If you have any specific questions regarding integration with Wix Code feel free to post them here
This looks too complicated to follow.
All we have is a new form with two input fields from, to.
Thanks anyway
Hello, I am trying to do the same, but something wrong with my code. Could you post your code as an exemple ? pleaaase 
I tried to do the same ( calculate distance between 2 address ) I have copied the code but something wrong… Do I need to encode something there ?
is anyone able to share a working code for calculating two location distances using api?
