Up next in 10
Build a Angular Google Maps & Directions API to Render Maps & Directions Between Places in Browser
Jan 24, 2025
Get the full source code of application here: https://codingshiksha.com/angular/build-a-angular-google-maps-directions-api-to-render-maps-directions-between-places-in-browser/ Hi Join the official discord server to resolve doubts here: https://discord.gg/cRnjhk6nzW Visit my Online Free Media Tool Website https://freemediatools.com/ Buy Premium Scripts and Apps Here: https://procodestore.com/
View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you how to
0:04
integrate the Google directions API so
0:08
to calculate the route and directions
0:10
between two places in the Google Maps so
0:12
inside angular application so you can
0:14
see we displaying this Ang Google Map
0:16
inside this angular application so we
0:18
have this button right here as soon as I
0:21
click the button it will actually
0:24
calculate the directions between these
0:26
two places that I configured and it will
0:28
display the routes here
0:30
the directions which is required for
0:32
going from this place to this place so
0:34
this is actually your the source and
0:37
this is your destination so it is
0:39
actually calculating this route and
0:41
showing you this is actually the
0:43
directions which is required so you can
0:45
easily move from this direction to this
0:48
direction so this is using the Google
0:50
directions API which is actually a part
0:53
of Google Maps API so there is a module
0:56
specifically in angularjs you can
0:58
integrate this inside
1:00
so which is AGM if you go to npmjs.com
1:03
you need two modules for this
1:07
so at theate AGM / core this is
1:11
actually the module which is required to
1:13
render the Google Maps so simply install
1:16
this and also for calculating the
1:19
directions this also has a package ag-
1:23
Direction so this is using the
1:25
directions API to calculate the distance
1:27
between the two locations in the map so
1:31
you also need this module as well so AGM
1:34
Das Direction so we are using these two
1:36
modules in simultaneously inside this
1:40
angular project so now to get started I
1:43
have written a complete step by-step
1:44
detail blog post on my website so you
1:46
can go to the description link to go to
1:49
that the blog post to get all the source
1:52
codes so now I will start from scratch
1:55
and I will delete all the code and start
1:59
from scratch
2:06
so first of all what we need to
2:08
do you need to go to your app. module.
2:12
TS file and we need to require this
2:14
module so we need to add these two
2:16
import statements so we simply say
2:22
AGM core module and it will be required
2:26
from this package which is at theate AG
2:30
m/ core and the
2:33
second module which is there for the
2:36
directions API so we require this as
2:38
well from this module which is AGM
2:41
Direction so we simply write these two
2:43
import
2:46
statement and now we need to go to the
2:48
Imports array here so we need to add
2:52
this so first of all the core module and
2:55
here we need to paste your API key so
2:58
which will be coming from from the
3:00
Google Cloud consoles
3:03
so there is a option here which
3:08
is so here you need to paste your own
3:10
API key so I've already created one API
3:13
key
3:15
so so you need to replace your own API
3:17
key so once I paste it the second module
3:20
we need to pass it is the direction
3:24
module so this is actually the
3:27
configuration which is done you can now
3:28
close this file and now move to your
3:31
app. component or TS file which is a
3:33
typescript file and here we Define the
3:36
two locations in the map the latitude
3:38
and the longitude so this are two
3:42
locations where we want to calculate the
3:44
directions between these two locations
3:47
we calculated this we declared the
3:49
latitude and
3:51
longitude so after this we can even
3:54
configure the zoom level of the map as
3:58
well so by this variable Zoom is equal
4:01
to
4:02
14 and then we need to calculate the
4:05
directions between these two locations
4:07
so we declare a variable here directions
4:09
undefined and then we declare a function
4:13
right here get direction so this
4:15
function will be responsible for
4:17
calculating the directions between these
4:19
two locations so we declare an object
4:22
here which is
4:24
Direction and this actually contains
4:27
your origin location which is actually
4:29
an object which contains the latitude
4:32
and the
4:35
longitude so you can see that and then
4:37
the
4:41
destination so we have the origin we
4:44
have the destination so in between these
4:46
two places we need to calculate the
4:48
direction
4:55
so so we come to the app. component.
4:58
html's file so we render this component
5:02
first of all the map here so AGM
5:05
map so we have this component right here
5:08
so here we need to pass some details
5:10
here such as the latitude and the
5:15
longitude so these two variables it
5:21
takes so as soon as you put this
5:24
latitude and longitude you will see on
5:26
the right hand side the Google Map will
5:28
display
5:30
and in this way you can display your
5:32
Google Map and then we need a simple
5:35
button outside this
5:37
map to
5:40
calculate the direction so we will B an
5:43
onclick listener so when we click this
5:45
button we will execute a
5:48
function which is the get direction
5:51
function so we have already written this
5:53
so once we click this you will execute
5:55
this function so
6:00
so you'll simply say get and now for
6:03
entering this directions we have this
6:05
directive here AGM
6:11
Direction so we'll have an NG if
6:14
condition that if the directions are
6:16
defined then
6:17
only we need to pass the origin
6:20
location which is contained
6:24
inside and then we it also takes the
6:27
destination so source and destination
6:30
so we already created these two
6:33
variables so we passing this origin we
6:36
passing this destination so once you now
6:38
click the
6:40
button if you drag down you will see
6:42
this button right here as soon as I
6:44
click this you will see it will
6:46
calculate the directions this component
6:49
and it will show the directions between
6:52
this is your Source location this is
6:53
your destination and it actually shows
6:55
the
6:57
directions and in this this way you can
7:00
use this module specifically designed
7:03
for angular applications AGM directions
7:05
which integrates directions
7:09
API so I showed you step by step
7:12
instructions how to configure this but
7:14
if you still want the full source code I
7:16
have given the full source code in the
7:17
description of the video you can read
7:20
the complete blog post stepbystep blog
7:22
post alongside where with watching the
7:25
video so thank you very much guys for
7:28
watching this video and ALS also check
7:29
out my website as well uh free mediat
7:32
tools.com uh which contains thousands of
7:35
tools regarding audio video and MH and I
7:38
will be seeing you guys in the next
7:40
video
#Other