Up next in 10
Build a Google Maps Distance & Time Calculator Using Directions & Matrix API in Browser Using JS
Dec 11, 2025
Buy the Full Source code of Application here:
https://procodestore.com/index.php/product/build-a-google-maps-distance-time-calculator-using-directions-matrix-api-in-browser-using-js/
Show More Show Less View Video Transcript
0:00
Uh hello friends, today in this tutorial
0:02
we will be building a complete
0:03
application using Google maps API,
0:06
direction API and distance matrix API.
0:09
So basically you will see that it's a
0:11
Google maps distance and time calculator
0:13
between two locations out there. We have
0:15
two input fields out there where you can
0:17
enter the from location and the
0:19
destination location and then we have
0:20
the calculate button and then basically
0:23
you can see we are showing the Google
0:24
map here. Basically Google can user can
0:27
see the location. Let me type a location
0:30
out there. You can type any two
0:31
locations in the same country. So let's
0:34
suppose if I write a location here
0:38
uh from Japur I need to travel Japur
0:41
Rajasthan from I need to travel to
0:43
Kerala
0:45
which is both these locations are in
0:47
India here. So as I now click the
0:50
calculate button. So what will happen
0:52
guys? You will see that it will now show
0:54
the directions the routes which are
0:56
there. You will see
0:58
Kerala is located here and Japur is
1:01
located here. And the nice thing about
1:03
that you will see the basically the
1:05
location here and also the driving
1:07
distance which is one,473
1:11
miles and basically duration how much
1:14
time it will took if someone wants to
1:16
travel between these two locations. So
1:18
it will be took uh it will take around 1
1:21
day and 21 hours in order to calc in
1:24
order to travel uh by car or bus. This
1:28
is basically the driving distance 1 day
1:30
and 21 hours. So basically this is a
1:34
very useful applications whenever you
1:35
are traveling outside you need to
1:38
basically you can just change this to
1:40
Delhi here. Click calculate. So once
1:42
again it will now update here from Delhi
1:45
to Kerala it is 1 day 23 hours. distance
1:48
is again 1,687
1:51
miles. If I now now change to here, you
1:55
can ch uh use this autocomplete API
1:58
which is provided by Google places API
2:01
which makes it very much easy to write
2:02
locations. Here you will see that now it
2:05
will took around 2 days 9 hours you will
2:07
see that and it is not limited to India.
2:11
You can take any country. So just make
2:14
sure that uh you are not just right here
2:18
calculating the distance between two
2:19
countries. So you can't be writing Japan
2:22
and India here because these two are
2:24
different countries and you can't be
2:26
traveling with a car. So you can see
2:28
could not retrieve driving distance. So
2:30
basically these are two different
2:32
countries and you can't be driving in
2:34
between those. So there needs to be the
2:37
cities there needs to be regions between
2:39
the same countries. So now if I write
2:41
here Oakuckland here New Zealand. So if
2:44
I now try type here the destination
2:48
let's suppose I need to travel between
2:50
Oakuckland and Christ Church. Click
2:52
calculate. You will see that it is 674
2:55
miles 15 hours it will took to travel
2:58
between Oakuckland and Christ Church.
3:00
You will see that basically this is a
3:02
route that it has. You can see it is
3:05
using the Google direction API to
3:06
calculate the shortest path route here.
3:10
So it is giving you these routes here.
3:12
So if you want to travel you can simply
3:14
follow these routes here. So if you zoom
3:16
in you will see basically these are the
3:19
starting location and basically the you
3:22
can simply follow these routes here
3:25
and you can travel to the destination
3:28
location. So this makes it very much
3:29
easy. I have de deployed this
3:31
application on my website
3:33
developer.com/maps
3:34
calculator and you can also go to the
3:37
home website. I have given the link in
3:40
the description of the video and you can
3:42
see basically distance and time
3:44
calculator. Simply click this and you
3:46
will be landing on this page here. And
3:48
also guys I have written a complete blog
3:50
post explaining each detail of how to
3:52
build this application from scratch. So
3:56
if you want the full source code, you
3:57
can go to the description of this video
3:59
to get all the source code. Just follow
4:00
the step-by-step instruction. So in this
4:03
video, we will be looking at how to
4:04
build this application from scratch. So
4:07
now you first of all need to get your
4:09
own API key. Simply now go to Google
4:11
Cloud Console. Click on create
4:13
credentials and click on API key to
4:15
generate your own API key. And then you
4:18
need to go to library and basically you
4:20
need to enable all the APIs here. You
4:22
need to enable the places API, maps
4:25
JavaScript API and uh also you need to
4:29
enable the
4:32
I think distance matrix API. Basically
4:34
it calculates the distance and the time
4:37
needed to travel between two locations
4:39
and also the directions API. So these
4:42
four APIs are needed. Directions API,
4:44
distance matrix API, maps JavaScript API
4:47
and uh this API which is places API. So
4:52
just enable all these four APIs and get
4:54
your own API key. We will need this. So
4:56
now let me delete all the source code
4:58
and start from scratch. So basically
5:00
guys first of all we will be now be
5:05
uh follow the step-by-step instructions.
5:07
So for styling it we are using
5:09
Bootstrap. So basically we will be
5:12
including the bootstrap CDN here like
5:14
this. So we have successfully included
5:16
this. After this guys we will simply
5:19
write the interface of the application.
5:20
So container class inside this we will
5:24
be putting the heading in the center
5:26
position which is find the distance
5:29
between two places
5:35
like this. So this is bootstrap heading
5:37
and then we basically will have uh a
5:40
horizontal form.
5:43
So this is basically a bootstrap class
5:46
which is uh form horizontal and inside
5:50
this guys basically we will have two
5:53
input fields out there where we will
5:55
allow the user to enter the
5:57
from origin location and destination
6:00
location. So we will have the label here
6:04
from
6:07
and basically we will be
6:10
allowing the user to enter the from
6:13
location.
6:16
So basically this will be a input field
6:18
here of uh type text and basically we
6:22
will be given a placeholder which is uh
6:26
origin location and uh we will be giving
6:30
an ID to it so that we can target in
6:32
JavaScript from that's all.
6:37
So we will repeat this guys for the two
6:39
locations. So simply copy this and paste
6:42
it.
6:45
So we will simply say to location and
6:48
basically this will be now destination
6:50
location.
6:52
So we will change the id here to
6:58
two. So it simply change from to two.
7:01
That's all. After this we will have a
7:04
simple button guys to basically submit
7:06
the form here. So again we will wrap
7:08
this inside the bootstrap class of form
7:10
group. So this will be basically a
7:13
simple button. we will attach the button
7:15
classes.
7:18
[sighs]
7:19
So we will simply
7:21
take the calculate button and we will be
7:24
attaching a on click to it. So when we
7:26
click this button guys you will execute
7:27
a function which is calculate route
7:29
that's all this is basically the
7:32
interface here you will see and one more
7:35
thing you need to attach basically I
7:37
forgot to attach the form control
7:39
classes
7:42
just attach these form control classes
7:45
here
7:47
[sighs and snorts] so now if you attach
7:49
it you will now see this is your app
7:51
interface so now basically we need to
7:53
make sure that we get get the locations
7:56
out there as I type here. So now to do
7:59
this guys, we just need to basically
8:02
import our uh
8:05
CDN for uh the Google Places API right
8:08
here. So simply import this script tag
8:11
which is given in the description of
8:13
this blog post. So simply import this
8:15
and here you need to import your API key
8:17
guys. Just replace your own API key. I
8:20
will go to the Google cloud console and
8:22
basically I will go to the
8:26
credential section and basically we here
8:28
we will get your own API key simply I
8:31
will copy this so don't use my API key I
8:33
will delete this API key after this
8:35
video so just I will replace it that's
8:38
all
8:40
and uh if I now see here nothing will
8:43
happen we need to attach explicitly so
8:45
for that we need to write some
8:47
JavaScript code here so as you can See
8:49
we are loading this places API here. So
8:52
now we will write the JavaScript code in
8:55
a different file.
9:03
So we are loading this main.js. Let me
9:05
delete all the source code and start
9:07
from scratch. So the very first thing we
9:09
will guys basically we will do here we
9:11
will target the input field one. We will
9:14
target this by the id that we have given
9:17
which is from
9:19
and uh we will get the second input
9:21
field the id which we have given which
9:24
is two. So now we need to simply
9:27
basically attach autocomplete
9:30
one. We will call this as and we will
9:32
use this uh Google maps places API and
9:36
it contains a method called as
9:38
autocomplete and here we will pass the
9:40
reference here input one and simply we
9:42
will do the same thing here for the
9:44
second input field. So new Google maps
9:48
dotplaces
9:50
[snorts] and here we invoke autocomplete
9:52
and pass input two. So now if you just
9:55
write this four lines of code guys, if
9:57
you now refresh your application, so
9:59
what will happen if you type a location
10:01
here, you will now see the suggestions
10:03
out there coming from the Google places
10:05
API. So this makes it very much easy to
10:07
write locations here. You don't need to
10:09
remember all the cities and address
10:11
name. So as you type you will now see.
10:14
So now we simply need to display the
10:16
Google map as I load the application. So
10:19
now to display the Google map it's very
10:21
easy. The next step will be very easy
10:23
here. Now basically we will attach a
10:27
object here which is my latitude
10:29
longitude. So here the latitude will be
10:32
you can take any latitude out of your
10:34
choice 38 346
10:37
and I will take the longitude as -0.4
10:43
97.
10:45
This is latitude longitude. And now we
10:47
simply need to attach the map options
10:50
which is we will center out we will
10:52
attach to mile latitude longitude zoom
10:55
level I will take as seven and the map
10:59
type ID this is very easy easy so what
11:03
sort of map you want to attach so we
11:06
want to attach a map which is road map
11:09
so there are various types of maps out
11:11
there you can check out the
11:12
documentation which is there and now we
11:15
will be adding the map guys. So we will
11:17
be adding it to the
11:19
So for this
11:22
here we just need to provide the
11:23
location. So we will be attaching it to
11:25
the element which has got the id of map.
11:31
You can also call this as Google map and
11:34
then also in the second argument we will
11:36
provide the map options. So here inside
11:39
the HTML we need to create a element
11:41
which will got this Google map id. So
11:43
right inside index html we will be
11:46
writing a simple
11:48
line of code here. So after the form
11:52
ending we will be having another field
11:54
out there which is
11:59
so we will have another
12:04
after it ends we will have container
12:06
fluid class. This is bootstrap class.
12:10
Inside this we will have first of all
12:12
the output section where we will display
12:14
the information and then we will have
12:17
the section for the Google map.
12:20
So if you now refresh it nothing will
12:23
happen because we just need to also
12:25
write the CSS part also we need to
12:28
basically style the map give some width
12:30
and height to it. So as you can see we
12:33
will write the CSS code in a different
12:35
file. So we can load this file app dot
12:38
CSS. So inside this file guys we will
12:41
write this CSS lines of code once again.
12:44
So first of all we will target it by the
12:47
id inside CSS. So here we will give a
12:50
fixed width of 80%.
12:54
And a height of 400 pixel. So this is
12:56
very much important. You need to give it
12:58
margin 10 pixel auto. So as soon as you
13:01
write this lines you will see that your
13:03
map will be displayed here. we will see
13:05
that.
13:07
So you can change the this to 100% as
13:11
well. This totally depends upon you. So
13:13
now this is 100%.
13:17
And also you can manipulate the height.
13:19
Let's suppose you want 800 pixel. So
13:22
height will change to 800 pixels. You
13:24
will see that. So now it is little bit
13:26
longer. You can view it in full screen
13:28
mode. You will see that.
13:31
And now guys we just need to basically
13:33
write a function as I so click this
13:35
button we need to write that function
13:37
which will actually calculate the
13:39
distance between distance and time
13:41
between these two locations
13:44
and also just write these output styles
13:46
as well. So where we will be displaying
13:49
the output that's all.
13:52
[snorts]
13:53
So write just go to main.tjs guys. Now
13:55
we will be initializing the
14:00
directions API which will make is easier
14:02
to calculate the routes and directions.
14:06
So I have covered this all this stuff
14:08
guys in the last video as well where I
14:10
showed you how to use the direction API.
14:12
If you haven't watched that video, I
14:13
will strongly recommend that you watch
14:15
the entire series where I covered the
14:17
direction API in detail. So I've written
14:20
this API. First of all, we call the
14:22
direction service. Then we call
14:23
direction renderer. Then we set it to
14:25
the map. So you can see these three
14:27
lines of code is very much necessary.
14:30
After we call this initialize the
14:33
direction API, now we can call the
14:36
function which will calculate the route
14:41
and here guys we will make a simple
14:43
request here. So here we will provide
14:46
need to provide the origin.
14:48
So here we will take the actual value
14:51
which is written here which is
14:54
direct direction value and then
14:56
basically we will be providing the
14:58
destination. So where you want to go. So
15:01
this will be coming through the two
15:03
value
15:06
and then the third option is the travel
15:08
mode. How you will be traveling either
15:11
you will be traveling through train or
15:13
bus or bicycle.
15:16
So there is basically
15:18
inside the API we have the travel mode.
15:21
So this is set to driving. So this can
15:24
also be walking as well. Walking
15:26
distance if you want the walking
15:27
distance, if you want the bicycling
15:30
distance or if you want the transit, you
15:33
can have a select field where you can
15:34
have all the distances. But for now I am
15:37
taking the driving distance. And then we
15:40
have the unit system. So in which unit
15:42
you want to display the distance. I will
15:45
display it in miles. You can also
15:47
display it in
15:49
uh kilometer as well. Totally depends
15:52
upon you. Unit system imperial. This is
15:55
that that's it. So these four options
15:58
are needed. And after this we will now
16:00
call the direction service
16:04
and this contains a route method and
16:06
basically will pass the request and it
16:09
basically returns the result alongside
16:11
with the status. And here we will
16:14
compare if the status property is equal
16:18
to google.maps dot direction
16:25
direction status if it is equal to okay
16:28
then in that case our we will we can
16:32
display the distance and the time this
16:34
is little bit complicated guys basically
16:37
here basically we'll be showing it so I
16:39
will not waste your time basically
16:44
I will simply paste it here. You can
16:47
copy paste from the blog post. It is
16:49
just displaying the
16:52
uh from location to location and then it
16:54
is displaying it by the driving distance
16:56
and the time as well. How much time it
16:59
will took that's all and also it is
17:02
displaying the directions and the roots
17:04
in the map. So if you now refresh it
17:06
here application if you type the
17:08
location
17:11
and if I say man London to Manchester
17:16
click calculate you will now see
17:19
nothing happens. Let me see. [snorts]
17:28
So just wait. Let me see. Calculate
17:30
route
17:44
Valent
17:50
uh let I think I made a mistake guys. So
17:53
what I will do is that I will simply
17:55
copy paste all the source code here. I
17:58
don't want to waste your time here.
18:01
So yeah, so you can go to the
18:04
description of the video to get all the
18:05
source code. It it is there.
18:10
So after this, I will paste this code.
18:12
That's all.
18:28
Let me see guys.
18:38
Local host.
18:45
I think you need to write instead of 127
18:48
you need to write local host because
18:59
I don't know why it is not working. So
19:01
what I will do is that okay I I think I
19:05
have missed some CDNs which is necessary
19:07
for this application. If you go to the
19:10
full application code guys, you will
19:12
find out all the CDNs which are
19:13
necessary. So I will simply what I will
19:16
do I will copy this
19:19
paste it here. So these oh sorry jQuery
19:23
is also necessary guys. You will see
19:24
jQuery CDN is also necessary that's why
19:26
the application was not working. So here
19:29
we just need to replace the API key
19:33
because we are using some bootstraps uh
19:35
JavaScript features. So that's why we
19:37
will need the jQuery as well. So simply
19:40
replace your API key. That's all.
19:44
So if you now type
19:48
distance.
19:56
So now you can see that basically it
19:58
will now show the direction. It will
19:59
also show the driving distance,
20:02
duration.
20:04
That's all. So thank you very much guys
20:07
for watching this video. If you like
20:08
this video, please hit that like button.
20:10
You can go to the live demo link present
20:12
on my website. You can also get all the
20:14
source code by going to the description
20:15
of this video. Thank you very much for
20:17
watching this video and I will be seeing
20:19
you in the next