Up next in 10
Build a Angular Google Maps Autocomplete With Places & Directions API to Calculate Routes in TS
Jan 24, 2025
Buy the full source code of application here: https://procodestore.com/index.php/product/build-a-angular-google-maps-autocomplete-with-places-directions-api-to-calculate-routes-in-ts/ 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 friends welcome to this video
0:02
so in this video I will show you a
0:05
Google Maps generally planner kind of an
0:08
application which does multiple things
0:11
in one application you will see inside
0:13
the demo of this application you can uh
0:16
enter a source location and a
0:17
destination location we have two input
0:19
Fields out there as soon as you enter
0:22
these locations and uh you will see the
0:25
places will pop in as soon as you enter
0:27
the location the picture will be there
0:30
of that particular location that you
0:32
entered and same is the destination and
0:36
then inside the Google Map we calculate
0:38
the route the actual directions which
0:41
will be taken if you traveling if you
0:43
want to see the distance how much
0:45
distance is there between the source and
0:47
the destination it will render out this
0:49
complete directions so that you can
0:51
safely travel from the source and the
0:53
destination so we show this Google Map
0:55
as well so it's a complete application
0:58
in angular and if you Lo this
1:00
application you will see these two input
1:02
Fields out there the source location and
1:03
the destination so if you enter a source
1:06
location let's suppose edner Sydney so
1:09
you will see the autocomplete will also
1:11
come in which is coming from the Google
1:14
autocomplete API so you can select the
1:17
source destination as soon as you select
1:19
you will see it will capture the places
1:21
API and it will return the photograph of
1:23
this uh address and it will show this
1:26
like it and also it will add a marker
1:28
inside the Google Map so that you can
1:30
clearly see where this location is and
1:33
also it Returns the place photograph and
1:37
then you tell the destination location
1:40
same we also have the auto complete
1:42
which is there and as soon as you select
1:45
the location again it Returns the
1:47
photograph and now it actually Maps the
1:50
location it actually tells the exact
1:52
route which is taken to travel from this
1:56
location to this location so it renders
1:59
all this route here which is actually
2:01
using the direction API of Google and
2:05
quite a lot of apis we are using in this
2:06
application first of all we are using
2:08
Maps JavaScript API to render this
2:10
beautiful map that you seeing where we
2:13
are mapping through all these routes
2:15
secondly we are using the Google
2:16
autocomplete API so as soon as you write
2:19
location we see these autocomplete
2:22
suggestions which comes in so we are
2:23
using this location and also lastly we
2:26
are also using the places API which is
2:29
returning the places photographs so as
2:32
soon as you write the address it will
2:34
also fetch the photographs and lastly
2:37
for calculating these routes the
2:39
directions we are also using the
2:41
directions API as well so we are using
2:44
four apis in conjunction in this
2:46
application so I've given all the source
2:48
code in the description you can directly
2:50
purchase it from my website Pro Cod
2:52
store.com it's a fully fleshed project
2:55
and after you purchase it you will get
2:57
this fully project it's angular
3:01
so for building this application we are
3:04
using quite a lot of dependencies so if
3:06
you npmjs.com uh for rendering out this
3:10
map we are using this open source
3:12
package which is at theate angular
3:14
Google Maps so if you just go to
3:16
npmjs.com and just search for this
3:19
package and the command is simple it's a
3:22
very popular package specifically
3:24
designed for angular applications so if
3:26
you want to renter this Google Map you
3:27
can use this package
3:30
so it has all the functionalities which
3:32
is required for building this such as
3:34
such as the places API auto complete
3:37
field so first of all now to configure
3:40
this you do need a Google Cloud API key
3:44
so you need to go to your Cloud console
3:47
and paste your own API key so you can
3:50
just click on this create credentials
3:52
and then select this API key and you
3:56
need to have a Google Cloud console
3:58
account here and
4:01
then you need to paste your API key and
4:03
just edit your index.html file so after
4:06
you get the source code just open this
4:08
file and right here in this key is equal
4:11
to location you need to paste your own
4:14
API key so once you paste the API key
4:17
you can run this project npm Run start
4:19
so it will start your project at Local
4:21
Host
4:22
4200 and now you can run this project
4:25
very
4:28
simply so
4:30
like this we enter the source and the
4:32
location destination it will show this
4:35
full projects so let me guide you
4:38
through the source code here so we have
4:40
these three components which is required
4:42
for this application the first one is
4:44
for displaying the Google Map so inside
4:46
this component we are actually using
4:48
this package if you see ad theate
4:50
angular Google Maps so we displaying
4:52
this Google Map and inside this
4:54
component directive it takes some
4:56
options right here this is your map
4:58
directions renderer
5:00
which is calculating the distance
5:01
between the source and the
5:03
destination so right here we are
5:06
calculating the distance right here and
5:09
we are providing a fixed width to the
5:10
map 100% and height 100% so it is taking
5:13
the full space which is available on the
5:16
web
5:17
page and similarly we have the place
5:20
autocomplete component and the place
5:22
card which actually shows the photograph
5:25
of the requested place so we are showing
5:29
the image of of the place and the image
5:31
URL if you see we are displaying it
5:33
inside this component so the
5:36
actual address that you enter so this
5:39
photo photograph is fetched from the
5:41
places API
5:43
so we do need to enable these API so go
5:46
to your library section if for some
5:49
reason the application not working you
5:50
do need to enable apis so the first API
5:53
we using is the maps JavaScript API so
5:57
which is useful for entering the maps
5:59
then you also need to enable the places
6:01
API which is returning the places
6:05
information and the photographs you need
6:08
this
6:09
API and I think that's all that we need
6:13
and directions API so directions API is
6:15
actually calculating the directions that
6:18
you see which is mapped from The Source
6:21
destination to the destination so you do
6:24
need to enable these apis before running
6:26
this project so a fully fresh project
6:30
you just need to replace your API key
6:32
and inside this index.html file right
6:35
here and then you can safely run this
6:37
project and this is actually the
6:39
components which are involved right here
6:41
so it is fully written in typescript
6:43
which is the superet of JavaScript and
6:46
we have this app. component.ts file
6:49
which is your main file right here so we
6:50
are using all these components in this
6:52
file so which is your autocomplete
6:54
component then we actually returning the
6:57
places photographs using this place
7:00
card component and lastly we are using
7:02
this third component for displaying the
7:04
Google map from this for from location
7:06
to two location so if you are interested
7:10
the link is given in the description you
7:12
can purchase the full source code
7:15
project and specifically using the
7:17
latest version of
7:18
angular and
7:21
uh so thank you very much for watching
7:24
this video and also check out my website
7:27
which is free mediat tools.com
7:29
uh which contains thousands of tools
7:31
regarding audio video and image and I
7:34
will be seeing you guys in the next
7:36
video
#Maps