Up next in 10
Angular ngx-google-places-autocomplete Example to Build Google Places & Maps Autocomplete Form Field
Jan 24, 2025
Get the full source code of application here:
https://codingshiksha.com/angular/angular-ngx-google-places-autocomplete-example-to-build-google-places-maps-autocomplete-form-field/
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/
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you uh how to
0:05
integrate the Google Places autocomplete
0:09
search field inside angular so there is
0:11
a package here which allows you to do
0:13
this which is ngx Google Places
0:16
autocomplete if you go to npmjs.com just
0:18
search for this which is ngx Google
0:21
Places autocomplete and it's a specific
0:25
angular module which allows you to
0:27
integrate the Google Places autocomplete
0:31
the command is very simple you just need
0:33
to install this and already installed it
0:36
and it's having 14,000 weekly downloads
0:40
and let me show you a very simple
0:42
example so we are running this
0:45
application on Local Host if you see and
0:47
we have this is simple input field and
0:50
as soon as I write something location
0:52
right here if I write you will see these
0:54
powered by Google Places results will
0:56
pop in and you will be able to select
0:59
the results
1:03
so all these autocomplete search field
1:06
results will come in using the Google
1:08
Places and JavaScript Maps API so you
1:11
will be able to select the places enter
1:13
the address with this autocomplete
1:14
search field and then it will return the
1:17
basically the information about the
1:19
place which you is selected so in the
1:21
console if you see it will return the
1:24
the picture of the place and then the
1:26
latitude and the longitude can see that
1:30
and this is actually the object which
1:32
contains the latitude and longitude so
1:34
if you change any location right
1:43
here so if I select another location you
1:47
will see it will return again the place
1:50
here you will see the latitude longitude
1:53
the place photograph so all this will be
1:56
coming from the Google Places API so now
1:58
to get started we need to install this
2:00
I've already installed it and for this
2:02
tutorial I've written a complete
2:03
stepbystep block Post Drive where I've
2:05
given all the source code so now to get
2:07
started we are inside the template so I
2:11
will write the code from
2:14
scratch so first of all right inside our
2:17
template this is our
2:19
template so we will have a simple
2:24
form and here we'll be defining our
2:27
input field
2:30
and this actually takes this attribute
2:32
which is ngx Google Places
2:37
autocomplete and here you define the
2:40
places and this will be
2:42
ngx places so here we have this input
2:46
field right here we Define this
2:47
directive which is ngx Google Play
2:49
autocomplete and then we Define this
2:52
places which is ngx
2:54
places and here we need to actually
2:56
Define a call back function on address
3:00
change so whenever the address is
3:02
changed we will Define this custom call
3:04
back function which is on change which
3:07
will pass the event like this so
3:09
whenever this the address is changed
3:12
this call back function will execute
3:13
which is on change so now we just need
3:16
to Define this function right in the
3:18
typescript code so after this we will
3:22
have we need to Define this onchange
3:25
function so right we come to the
3:27
typescript code
3:31
and first of all we Define view child
3:34
and
3:36
we actually whatever is the view child
3:39
will be the same here which be given
3:41
like
3:45
this and this will be of type Google
3:54
Places and then we Define this on change
3:57
function
4:00
which will hold the address for us
4:02
so whatever address the user will type
4:06
this address will be
4:07
there and inside this on change function
4:11
uh we will
4:15
actually display the
4:21
photograph of the entered address like
4:23
this so whatever is the address we
4:26
access the photos get URL and we show
4:29
the height and
4:30
the so in this
4:35
way and then to actually
4:38
get the latitude and the
4:45
longitude we use this address. geometry.
4:48
location longitude latitude and adjacent
4:52
object so for starting this project you
4:55
need to go to your index.html file right
4:59
here and replace your API key I've
5:01
already replaced it so this will be the
5:04
complete project I've given in the
5:05
description so you just open the index.
5:08
HTML file and after the key parameter
5:10
you need to go to Google Cloud console
5:13
and just create your API key right here
5:17
and just create API key and replace it
5:21
right here so I've already replaced it
5:23
and then you come to this project and
5:25
simply run it locally by executing the
5:28
command which is NG sir so as soon as
5:31
you run this project this will start
5:34
this project on Local Host 3000 by
5:37
default and you will be able to access
5:39
the autocomplete search field and we we
5:42
able to write any
5:45
place and the suggestions will come so
6:12
so you can see that so in this way you
6:16
can integrate this autocomplete there is
6:20
a specific module which is ngx Google
6:22
Play autocomplete so thank you very much
6:25
for watching this video all the sorts
6:26
code I have written a complete
6:27
stepbystep blog post for this you can
6:30
check out my blog post alongside with
6:32
the full source code as well and thank
6:34
you very much for watching this video
6:36
and also check out my website as well
6:38
free mediat tools.com uh which contains
6:41
thousands of tools regarding audio video
6:43
and image and I will be seeing you guys
6:46
in the next video
#Internet Software