Guide to Getting the Distance and the Duration from Google Distance Matrix

[Max_Saravia]

Hi, today I want to share with this awesome community how I did to get the distance between two coordinates that can be from a map, from a database or written by hand.

First of all remember that if you are going to use it for a web app with a lot of traffic, Google is going to charge you a fee that can be little or a lot depending on the traffic, you can check the prices here: https://developers.google.com/ maps / billing / gmp-billing # dynamic-maps

Ok in just 3 steps you will have this working.

First step: get a google key for developers here: https://developers.google.com/maps/documentation/javascript/get-api-key

Second Step: In my example I just want to know the distance between a moving point to a point that is always fixed, but you can also do it to a point that is also a variable.
That’s why I’m only going to use 2 variables: latitude and longitude and two constants that will also have latitude and longitude.
You can get this data in many ways, I did it by creating a google map component :

So u have now a latitude and a longitude:

maps1.latitude
maps1.longitude

Third step: on the client side, open the components panel in DATA, choose the “Api Action” component
In our new api action we can change the id in this case I put api4, in method we leave GET, set No Auto Load and update only on specific events, otherwise costs can go up very fast, in data type we select JSON and we do not write any URL, but we go to Dynamic Attributes, we select URL and copy and paste this code :

https://maps.googleapis.com/maps/api/distancematrix/json?units=metric&origins=’+maps1.latitude+’,’+maps1.longitude+’&destinations=-34.603103%2C-58.391606&key=write here your key

Obviously in “write here your key” you have to write your own key that you got it in step 1.

Here is the entire code of my api action:

<dmx-api-action id="api4" data-type="json"
		dmx-bind:url="'https://maps.googleapis.com/maps/api/distancematrix/json?units=metric&amp;origins='+maps1.latitude+','+maps1.longitude+'&amp;destinations=-34.603103%2C-58.391606&amp;key=*Your Api Key*'" noload>
	</dmx-api-action>

Ok now you have everything ready but how do you see the distance or the duration?

Very easy, you can create a title or a paragraph on your page and create a bind like this:

Here is the code of the bind for Time and Distance:

api4.data.rows[0].elements[0].duration.text+'  '+api4.data.rows[0].elements[0].distance.text

As you can see, this method is really easy and fast, you can use it in many ways, here you can see the documentation with which you can add or change parameters such as the metric system for example so that instead of kilometers you can use miles and much more.

Overview  |  Distance Matrix API  |  Google Developers

I hope you find it useful.

Cheers

[patrick]

Thank you for sharing this. Why are you using 2 variables and not just 1, you could also use the coords directly. Also I would suggest not to auto load, it then calls the api on each url change (when you move the map). Better is to set No Auto Load and update only on specific events, otherwise costs can go up very fast.

There is also a kind of hidden App Connect component for it, it never made its way into Wappler. It is bundled in the dmxGoogleDirections.js file.

Usage:

<dmx-google-distance-matrix id="matrix" origins="Enschede" destinations="Amsterdam"></dmx-google-distance-matrix>

Please be aware of the costs for the service, you pay per element it returns and costs about $5 USD per 1000 elements. https://developers.google.com/maps/documentation/distance-matrix/usage-and-billing

[Max_Saravia]

@patrick

Why are you using 2 variables and not just 1, you could also use the coords directly.

Hi Patrick, thanks for your advice. Yes, you are right, the two variables are not necessary, I created them in a test page thinking about my project, but they are not necessary for the tutorial.

@patrick

Also I would suggest not to auto load, it then calls the api on each url change (when you move the map). Better is to set No Auto Load and update only on specific events, otherwise costs can go up very fast.

Good and important advice!

@patrick

There is also a kind of hidden App Connect component for it, it never made its way into Wappler. It is bundled in the dmxGoogleDirections.js file.

Wappler is like Pandora’s box, always full of surprises!

Based on your observations I am going to edit the tutorial to make it shorter and more precise.