Up next in 10
Javascript Distance Matrix API Project to Calculate Distance Between Two Markers in Google Maps
Dec 11, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/javascript-distance-matrix-api-project-to-calculate-distance-between-two-markers-in-google-maps-2/
Show More Show Less View Video Transcript
0:00
Uh hello friends, today in this tutorial
0:02
I'll be showing you that how basically
0:04
you can uh
0:06
build out a simple application on Google
0:08
maps. Basically you can calculate the
0:10
distance between any two locations that
0:13
you mark on the Google map. Let me show
0:15
you the very simple example here. So as
0:18
you can see this you can see it's a
0:20
world map out there. Basically you can
0:23
just scroll down or scroll in. So let's
0:26
suppose if you want to have a distance
0:28
between any two locations that you mark
0:30
on this map.
0:33
So let's suppose I go to a certain
0:36
location here. The distance will be in
0:38
kilometer. We will be using Google
0:40
distance matrix API in the background.
0:43
So let's suppose we have two locations
0:45
out there. You will see we will mark one
0:47
location out there.
0:52
Let's suppose I mark this location
0:55
Christ Church. If I mark this red box,
0:58
if I mark Wellington here, you will now
1:01
see basically in the distance here, you
1:03
will now see 457 kilometer. So basically
1:07
two locations I have marked it on the
1:09
Google map, Christ Church and
1:11
Wellington. And basically it is giving
1:13
me the location between these two
1:14
locations. As I have marked this inside
1:18
this info window, you will see distance
1:19
is equal to 457 kilometer. If I now
1:23
basically cross check here
1:26
if I go to Google and let's suppose if I
1:29
calculate the distance between
1:35
so I think it gives the driving distance
1:40
around about 4 440 kilometer you will
1:43
see that so it's very accurate here it
1:47
is giving you 457 you can take any other
1:50
example here let's suppose
1:52
If you go to another country here,
1:57
let's suppose if you go to this one,
2:02
I need to calculate
2:04
Melbourne to Canbor
2:07
680 kilometer. You will see Melbourne to
2:10
Canbor. It is 680 kilometer. So you you
2:14
no longer need to type the country name
2:17
or type the address. You can just simply
2:21
put the marker on two locations and then
2:24
it will automatically give you the
2:26
distance right here in the map itself
2:28
which is 680 kilometer. It's a very nice
2:31
little application. If I now again cross
2:34
check here, Melbourne to Canbor,
2:40
Melbourne to Canbor
2:47
around about 662
2:50
kilometer. You will see it is round
2:52
about very accurate.
2:54
So all the source code guys of this
2:56
application is given in the description
2:58
of this video. So you can uh copy paste
3:01
all the source code and basically you
3:03
just need to replace your API key. I
3:05
will give you this API key.
3:08
You will see that. So the process is
3:12
very simple. You can go to my blog post.
3:14
I have written a complete step-by-step
3:16
blog post on this topic explaining each
3:19
instruction in detail. So first of all
3:23
uh you go to the full source code is
3:26
also available. Simply copy to clipboard
3:28
and paste it here. And here the very
3:30
first thing you need to do while you do
3:32
this, you need to copy paste your API
3:34
key. Go to Google Cloud Console. If you
3:38
don't paste this API key, you will get
3:40
this error right here for development
3:42
purposes only. For countering this
3:44
error, you just need to go to your
3:46
Google Cloud Console, copy your API key.
3:49
Don't copy my API key because I will
3:51
delete this API key at the end of this
3:53
tutorial. Simply paste it here. And once
3:56
you paste it now you will not see any
3:59
kind of error. You will now see your own
4:01
map. Put the location you will give your
4:03
distance here. You will see that
4:08
you will see. So now to build this
4:10
application guys it's very simple. We
4:12
will build it from scratch.
4:16
So as I already told you we are using
4:18
Google distance matrix API. So first of
4:21
all you just need to initialize a simple
4:22
map inside the div section. Just give it
4:25
a style here. Height of 1,000 pixel,
4:27
width of 100 pixel and on load we will
4:31
be initializing a function which is init
4:33
map. So right here inside this
4:36
JavaScript we will write we will declare
4:39
some variables here. First of all for
4:42
the map marker one
4:46
marker two
4:49
and distance
4:53
and then we will initialize this
4:54
function guys init map. So this will
4:56
execute automatically and here we will
4:58
initialize our map here which is Google
5:01
maps map and here we will pass the
5:05
reference of the map here document
5:07
element by ID which is map
5:11
and it takes the second option which is
5:13
the zoom option. You will put eight zoom
5:16
level and you will center your map here
5:19
providing the latitude which is 37749
5:26
and longitude which is - 122.
5:38
So I think
5:42
yes center
5:46
just paste the center coordinate here.
5:47
Let me paste it here.
5:53
That's all you can see that. Now
5:56
basically guys if you refresh your
5:58
application what will happen here?
5:59
Basically it will load the map here at
6:01
this location here.
6:04
And now once you click this map here
6:05
nothing happens because we need to bind
6:07
a on click event handler to this map
6:10
here. So whenever we click it we need to
6:12
place the marker. So we will be adding a
6:15
event listener to this map
6:19
which is click. So whenever we click on
6:21
the map so what we need to do so inside
6:24
this call back function we just need to
6:26
add a basically a marker. So this can be
6:30
equal to add listener. Sorry. Add
6:32
listener.
6:34
So here we will put the marker. If the
6:37
marker is not on,
6:39
then we will simply say marker 1 is
6:43
equal to new Google map dot marker.
6:48
This is basically the method which is
6:50
used here guys which is you need to give
6:52
it give it the position of the marker
6:54
where we need to put. So we will get the
6:56
position using event latitude longitude.
7:00
This event is passed here. You can see.
7:05
So this will give the latitude and
7:08
longitude.
7:12
And then we will put the map marker on
7:15
the map. And title will be simply marker
7:18
one.
7:22
That's all.
7:25
And let's suppose if you are placing the
7:27
second marker.
7:32
So let me just do it now. If I just
7:35
refresh it. So what will happen here? If
7:37
I refresh the application,
7:45
if I place the marker, you will see
7:47
nothing happens.
7:56
Okay, nothing happens
7:59
for that. What we need to do here
8:02
basically we need to have a else block
8:04
here. So inside else block we will set
8:08
the position
8:11
which is event dot latitude
8:15
longitude
8:18
marker to set map to null.
8:23
and market two to also null.
8:44
So I think it's a very uh good
8:46
application. So I think it's very simple
8:48
for me to copy paste this code here and
8:51
then explain to you what is happening.
8:56
It's a very short little code here.
9:06
So if you go to the bottom of the blog
9:08
post, you will find out all the source
9:10
code. Simply copy that, paste it here.
9:14
And then basically you need to go to
9:16
Google Developer Console to paste your
9:20
API key.
9:29
That's all. And then open this inside.
9:33
You will see
9:35
basically what is happening here. You
9:36
will see we are placing the markers
9:38
here. Whenever we clicking on the map
9:41
here, you will see we are placing these
9:42
red markers that you see right here. So
9:45
now to place these markers, we are
9:47
having this click event out there. Add
9:50
listener method is there. We are
9:52
capturing the latitude longitude using
9:54
this event object. We are using this
9:55
marker method to place the marker on the
9:57
map. This is basically the second marker
10:00
we are placing and then we are using
10:02
this method which is calculate distance
10:04
which is executing it in the background.
10:07
So inside this method we are making use
10:09
of this distance matrix service which is
10:11
provided by Google. If you just search
10:14
here Google distance matrix API
10:18
basically it's a API which is provided
10:20
by Google
10:24
which allows you to calculate the
10:26
distance between two locations latitude
10:28
longitude and then we are simply passing
10:30
the marker one location marker two
10:32
location. You can also pass here air
10:35
distance also but we are calculating the
10:37
driving distance Google maps and then it
10:40
is calculating the distance and
10:42
displaying it inside info window which
10:44
is in kilometer and then we are opening
10:47
this info window automatically. This is
10:50
the overall application. If you like
10:52
this application then please hit that
10:54
like button subscribe the channel and I
10:56
will be seeing you in the next tutorial.