Javascript Distance Matrix API Example to Find Distance & Routes Between Two Places and Show in Maps

uh hello guys welcome to this video so in this video I will talk about uh how to use distance Matrix API of Google

Maps API so actually calculate the distance between two locations and also show the different routes and directions

in the Google Maps it's a full project right here and you can see the interface of the application we have two Fields

out there we can enter the from location and the two location and we will also be

having autocomplete right here so let's suppose if I enter any location I need to calculate the distance between Delhi

and Bal so I will just simply write the location so as you can see as I writing the locations autoc complete suggestions

are coming right here from Google Maps autoc complete API so if I just enter

these two locations and if I want to get the directions driving distance so as I

click the button so what you will see that it will show you me the actual distance in the Google Map how basically

we can travel from one location to other the location and there is a second button out there which will be actually

calculating the distance so as you click the distance it will show you the distance between these two locations

which is 791 kilm so you can see you can move from this location and as you zoom

this it will actually tell you the actual locations and the different routes that you need to travel to

actually travel from this Delhi to bopal so you will see this is very useful if

you are traveling from one location to other location you can use this Google Maps simple route and it will actually

you can see if you zoom in right here it will tell you the exact

routes how to travel this you can zoom in right here

more this is really useful guys if you can basically take a screenshot of it

and then if you are just traveling it you can see in which location you need to move so it's very useful

so in this way we basically we doing this in this video we can calculating

distance and the different routes so for this we are using Google distance Matrix

API so you can just change this location to any

location now if you click get direction so you will now see it will now be showing the direction C from this

location calculate distance and now this distance becomes 1,484 kilm

so you can see that so it basically shows you the full route and the

directions and the API is called as distance Matrix API guys so if you go to Google Maps platform documentation and

it basically it's not a free API guys it does give you $200 free credits after

that you need to upgrade to a plate paid plan so you do need to wisely call these API calls so if you're just testing out

out you can have $200 I think 1,000 request are free after that you need to go to the monthly

plan and uh you need to now create basically this

uh Cloud console account I've already created that and then you need to go to

API services and enable this API called as Google distance Matrix API so just

search for this API called as distance Matrix and uh the very this

is the API that we are using to actually calculate the distance and get the directions I've already enabled this API

and then you need to also create API key simply go to create credentials and

click on this button API key so it's it will give you your API key simply copy that and store it at a

location I've already copy pasted this right here if you see that so if you need the full source code of this

project the link is given in the description you can directly purchase the full source code the link is given in the description so now let's get

started by building this application so I will simply delete all the source code and start from

scratch I will delete all this

so for basically styling this application guys we are actually using Tailwind CSS I've already included the

CDN for this simply include the CDN for tailwind and that's all that we need to

do so the very first thing we need to do after the title we just need to include the CDM for the Google Maps API so https

maps. Google ap.com slmap SL API

sljs and then we need to paste the API key so this API key you just need to

copy from Google Cloud console so I already created this API

key simply I will copy this so I will delete this API key guys so just don't

copy my API key and then we will simply say

we will also be including the places API as well so just need to include this and

libraries is equal to places we are also using Google Places API to actually fetch the information about the

places so after you do this we will now be writing our

body so we will attach this onload event so whenever your body is loaded we will

be actually be executing this function initialize map so with this function we will be executing code to actually

display the Google Map in the browser so you will basically be attaching this

Tailwind class BG gray 100 and then this will be a container

class MX Auto these are all Tailwind

classes so inside this we will have Flex justify Center just to basically Center

everything mb4 so input type text so here we will

be giving an ID to it of

from and we'll give it a placeholder so here the user will be allowed to enter

their from locations so simply I will say from

so we'll be giving a class to it Tailwind class so w width will be

64 padding y from 2 PX4 and it should be rounded large Shadow will be medium and

it will be Focus outline n Focus

ring FOC Focus border blue 300 margin from the right four these are

just all Tailwind classes guys so which is very simple if I save this project and so you will basically see this from

is added right here similarly we will be adding the

next location same styling will be there so I will copy this paste

it so we'll change the ID this will be two and here the ID will change from

from to two so there will be two input Fields

added the from and the two if you see now we just need a simple div

section where we will be actually be displaying the map so Flex

justify Center inside this we will have a button

this will have a class of BG blue 500 so when we hover onto this butter

the background color will change BG blue 700 shade and the color of the button will

be white text white font of the button will be font

bold py2 PX 4 button will be

rounded and focus outline

none and

focus Shadow outline margin from right so all the we have given all the same

styling that we have given to the input field and uh we will simply say get

directions so we have this button right here if you

see so same thing we will be giving the second button which will be useful for

calculating

the distance so I will copy this so

this this is called as calate

distance so get directions calculate distance so these two buttons are

there so after

this we will actually be giving a div an ID of

map and we also be giving a class to it of margin top top eight

this is mt8 margin from the top position 8 and we'll also be giving a style to it of

height will be 600 pixel this is overall uh the UI of the

application if you see uh this is from and this is

to I think I made a mistake right

here let me copy

this refresh now you can see this is the correct interface you can directly purchase the link is given in the

description so now what we will do

we now need to actually basically write this function in it map so whenever your body is loaded this function will

automatically execute so what I will do is that I will simply include our

Javascript file right here in a separate script.js so just we have our script.js

file so here you'll actually write the JavaScript code which is required so first of all we will declare some

variables the map directions

service directions render these are all variables which will be used in this application so I

will just declaring it at the very top from input two input to actually get the

from location and the two location so these are all the variables now we'll be declaring the init map

function which will get execute it automatically so we are basically first

of all be showing the map so for showing the map you can use google. maps.

map here we need to Simply set the reference so we are given this reference

in the HTML the map element we have given an ID to it we are targeting it by

the this function and the second parameter it takes is the actual zoom level which is I will set it to eight

and Center we will Center out the location by providing latitude which is

37.72 7749 and the longitude which will be -

122 41

94 so after you do this if you save this

application your map will be rendered out

so it is saying that Google is not

defined google.

maps.

uh let me copy this I think I made a mistake right here simply copy

here okay okay I think this we need to

go we need to paste this code right at the very top whenever

body is not loaded so just write here the ordering is very important

simply paste

it if this is not loading guys what we can do we can also do this like

this we can attach this call back function right here call back is equal

to init map and then we can say async

differ just we can simply add theate call back we can write and then followed by the function name and then we can

write async AER to actually load this asynchronously and then we can remove

this on load this simply means the same thing I think I'm making some typo mistake

that's why don't want to waste your time so what I will do save this

code I think

our div ID and let me paste this code here think I'm

making some kind of mistake right here

so and just paste your API key so API credentials so please show key

copy so you can see map is now showing here

you can zoom in so now the map is showing so what I will do

uh so we have written this code up till now I will

simply up till now we have written this code we have declared these variables we have written up this code right here so

after this what we need to do we need to declare these

uh Direction service so this is equal to new Google maps. direction

service so we are actually invoking that distance Matrix API we are invoking this

Constructor this is actually method here and then Direction renderer which is a

new Google maps. directions

render so after that direction renderer do set map we are invoking this to the

actual map that we created initializing the service and now we will take the

locations the user has submitted from and the two

input so whatever locations the User submitted this will be there right

here and we will simply say we will attach this autocomplete

API because if you just see right here if

I if I try to enter some locations it will not work autocomplete is not working right here so we need to attach

the autocomplete first of all to this so what we will do autocomplete

from so we will attach this autocomplete API by using Google maps. places.

autocomplete from input and then simply you'll declare it

for the two as well which is same code Google maps. places.

autocomplete and we'll pass this from sorry two

input and then we will write these two lines autoc complete from and we will bind this bind to bounce and Then

followed by the map and same code autoc complete two bind

two so if you just try to reload the application now you will be able to see

the auto complete

working Google Maps direction service is not a Constructor uh let me

see uh Direction service directions sorry this needs to be Capital just make

sure Direction service and this also directions

render just change

this if you type now you will see autoc complete is looking right here all the

auto complete is right this also work so now as I select some locations

right here so whatever what we need to do right here we will be binding a event

handler each of these

event uh just write here we will basically bind a event handle to these buttons right here so whenever we click

this uh first button which is calculate route so these buttons will be right

here you need to attach on on click to the to these two buttons so on click so

whenever we click the first button we will execute a function called as

calculate

route and the second will be if you click this button it will

basically execute a function calculate

distance so these two functions we have attached so now we just need to Define these two functions so first we will

Define this calculate

route so inside this very first function what we will do we will basically make a

simple request to the Google distance Matrix API so three

things we need to pass right here which is the origin which is the from input do value

second is the destination which is the two input. value just put a comma this object here

the third property is the travel mode there are various travel modes out there bicycle if you're traveling it using

walking driving bicycling Transit so I will be selecting the

driving distance that I want to calculate and then we will simply say Direction

service. route and here we will pass this request to actually get the

routes between the destination and the origin and this will have a result and

the

status so we are actually using the route method of the distance Matrix API to actually and based upon that status

if the status is equal to okay in that case

you will simply say that directions renter do set

directions result and if the status is not okay in

that case you will simply alert the user that directions

fiiled so if you just uh save this and try to enter a

location I want to travel from ockland to Wellington so I will

simply click on get directions as you see guys basically it will show to

you this is Valentine if you

see it will show you the correct route which whichever route that you want to take if you're traveling it through car

car driving distance you can see

that so you can do it for any

location so if you want to have toq and

then

so as you can see the message will come if the directions are not valid so you will see

that this is Melbourne this is

Sydney so in this way guys you can do this uh now the second button is

calculate distance so if I enter basically you need to Define this function which is calculate

distance the second button this button we'll basically be using the again this same

API Google maps. distance

Matrix Service we'll execute the Constructor right here so we are using

distance Matrix Service API guys so inside this service.

get distance Matrix and this actually takes an

object which first is the origin which is the from input dot

value and then the destinations this will be two input do

value and again it takes the travel mode so I will simply say I am traveling

through car so I will set driving and then unit system fourth property it

takes and this I want to take the distance I calculate the distance

in Google maps. unit system and I want to have the in metrix

so it will calculate in kilometer so we'll say avoid highways this property

is also there I will set it to false I don't want to avoid the highways and

avoid tolls this is also a uh property so I will set it to again

false and then it will now execute basically the call back it will contain

our response in the status Arrow function is this

and so you can see that guys it takes we are calling get distance Matrix we are

providing origin destination travel mode unit system avoid highways avoid tools

these five properties six properties we are providing it to have calculate the distance and now it will say if status

is not okay in that

case you can simply say to the user

that location is uh not correct and in the else block if the

status is okay in that case we will calculate distance at kilometer so what

I will say response. row zero elements

zero distance. text and then the info window

we will just show the distance in the info window so that the user can clearly see what is the distance so new Google

maps. info window in this way we can construct info window in the Google Map

and the content right here what is the content that you want

to show in the distance window

so this is a distance it will so

distance that's all and after we just need to open this info window automatically so what I will say info

window do set position map. get

Center info window

open that's all so now it will calculate the distance it will show the distance in the info window if I just refresh the

application now if I basically write the location let's suppose

Texas and then I will need to Los vas click on that so if you see this is

basically the distance it calculated sorry the

directions this is a Source location you can zoom in right here check the doutes

directions it will drive in distance if I click this calculate distance and now

it will show you the distance which is 1,722 kilom and it is using the distance

Matrix API to calculate the driving distance between these two locations and just showing it in the info window this

is the overall project in the browser using vanilla JavaScript guys we are using distance Matrix API places API

autocomplete API and also so Google embed API so this is a complete project

if you are interested you can purchase the full source code the link is given in the description please hit that like

button subscribe the channel and I will be seeing you in the next video