Google Maps Distance Matrix API JavaScript Explained!

[Music] in this lesson you are going to learn what is google's distance matrix api what are the required request route and query parameters to make an http call finally i'm going to be showing you how the output response object will look like distance matrix api is one of the google maps api services it calculates travel distance and time between two or more addresses based on transportation modes such as driving walking bicycling and transit here is a distance matrix base url https colon slash maps dot google apis dot com slash maps slash api slash distance metrics it takes one required route parameter and three required query parameters let's take a look at the required route parameter the required route parameter would be either json or xml text this determines the output format of the response object that is coming from distance matrix api now let's take a look at the required query parameters the first one is origins the value of this parameter will be a single or multiple addresses separated by a pipe sign this will be the starting point for calculating travel distance and duration the value of this parameter can be one of these formats which are plain street address geographic coordinates latitude and longitude separated by a comma or place id the next parameter is destinations similar to origins you can add one or more addresses to their destinations parameter separated by a pipe sign this will be the ending point for calculating distance and duration again this can be one of the three formats i have mentioned in here the third one is the key which is going to be your apa key from the google cloud console and the last one mode which is an optional the transportation mode determines the length of the travel distance and duration the value of this will be one of these options driving walking bicycling and transit this is optional in the sense that if you do not specify in it in the url the default mode will be set to driving once the request is complete and everything goes well you will get an output object in json format like this in this example as you can see there are three arrays in the output object which are the destination addresses origin addresses and rows the origin and destination arrays will have all the addresses that we pass into the origin and destination parameters as you can see i have one of each in this example and the calculated distance and duration data are inside the rows array under the elements array so it's pretty straightforward let's see what output object we will get when we pass more addresses as you can see in this example there are three origin and two destination addresses in this scenario the distance matrix api will calculate the travel distance and duration between the first address value in the origins parameter and each address in the destinations parameter for example it calculates between 20 mercer drive which is the first value in the origins parameter and 644 lecture drive which is the first value in the destinations parameter the result of this is added to the first index in the elements array which is the first index in the rows array as you can see the distance is 1.9 kilometer and duration is 4 minutes let's take a look at the next one i'm going to use the same origin which is 20 mercer drive and the next destination address which is 866 lakeshore drive which is 3.1 kilometer and 5 minutes duration and this result is added to the second index in the elements array then the same thing happens with the two remaining origin addresses now that we know how the google metrics api works let's make an http request to get the travel distance and duration let's create a constant called url all uppercase equals inside the backticks assign distance matrix base url the reason i use backtricks because i can pass origin and destination parameter values dynamically using string interpolation let's add the required route parameter at the end of the url which is json question mark then we need to add three required query parameters which are origins destinations and keys question mark pass the first query parameter which is origins equals dollar sign open in closing curly braces as you know the value of the origins and destinations parameters could be actual street addresses or graph geographic coordinates or place ids so i am going to choose to use coordinate values this dot route origin dot lat comma dollar sign opening closing curly braces this start route dot origin dot lng for longitude and sign then the second parameter which is destinations dollar sign open and closing curly braces this dot route dot destination dot lat comma dollar sign opening and closing curly braces this dot route dot destination dot lng let's add the last parameter which is key so and sign key equals my apa key from the google cloud console like so make sure to use your own api key in here now i have composed the url let's make a request to the api first import axios at the top so below the opening script tag import space axios space from space axios inside the codes and semicolon then come down to the calculate button pressed function call that get method on the axios object and pass the url like so this will return a promise so call the then method on it which takes a callback function and the response object will be specified in the response parameter if the promise is fulfilled otherwise call the catch method on it passing a callback function in there i can access the error data using the error property switch back to the browser and make sure that the developer console is open choose random addresses from origin and the destination input fields and i got the course error let's fix the course error by appending the proxy server link to the url so switch back to the code type it in at the beginning of the url https colon slash slash course hyphen anywhere dot heroku app dot com forward slash let's try it one more time and this time i got the response object back from the google server nice hey if you want to know more about google maps api and how you can use it to enhance location-based services in your javascript or vue.js app check out my course link in the description below thanks for watching and i'll see you in the next video

Channel: SoftAuthor

Views: 12,510

Keywords: google maps api, distance matrix api google, distance matrix api javascript

Id: z4U2c0y-suI

Length: 8min 39sec (519 seconds)

Published: Thu May 26 2022