Up next in 10
Build a React.js Google Maps Autocomplete & Geocoding API to Display Address Details, Photos Data
Jan 17, 2025
Get the full source code of application here:
https://codingshiksha.com/react/build-a-react-js-google-maps-autocomplete-geocoding-api-to-display-address-details-photos-data/
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 how to
0:04
integrate the Google Maps autocomplete
0:07
API inside react Chas application and
0:09
also convert your addresses into
0:11
latitude and longitude using the geoc
0:13
coding API as well so inside the demo
0:16
you see this input field out there so
0:18
here you will enter your address and
0:21
then it will also show the auto complete
0:23
so as soon as you start to type this
0:26
auto complete will show it is fetching
0:28
the suggestions from the Google Maps
0:30
JavaScript API the autocomplete API and
0:34
all these addresses will come and as
0:36
soon as you simply select the address it
0:38
will display convert your address geoc
0:41
code it and it will display the latitude
0:44
and the
0:44
longitude and you can see that the place
0:47
ID it also uses the places API to fetch
0:50
information about that particular place
0:52
and it shows the full address the name
0:55
of the place the full formatted address
0:58
so I will show you this is a specific
1:00
react CH component which allows you to
1:02
make request to the Google Maps
1:05
autocomplete places and geoc coding
1:07
API so you can pick any address here you
1:11
can see that
1:13
uh so as you type here you will see that
1:16
you can pick any address and then again
1:19
it will convert that to your latitude
1:21
and longitude the place ID formatted
1:23
address the name of the place so now to
1:26
get started first of all you need to
1:28
create a Google Cloud console account
1:29
account I've already created one so you
1:32
need to have a billing account here so
1:36
for that you need to go to your
1:38
credential section and just make to you
1:43
need API key so inside your dashboard
1:47
you simply click on that section API key
1:50
and then your API key will be created
1:52
and then you need to copy that apart
1:54
from that you need to enable the API so
1:56
just go to your library section and here
1:59
you need to search for the apis so first
2:01
of all you need to enable the places API
2:04
which is
2:06
necessary just enable this if you go to
2:09
this you will see this enable button
2:12
click on that enable button I've already
2:14
clicked the enable button so now it is
2:16
changed to manage the next API that we
2:19
want to enable is the maps JavaScript
2:22
API so simply select this API and also
2:25
enable this as
2:27
well so I've already enabled this so
2:30
this is used for getting the
2:31
autocomplete results so it's the
2:33
autocomplete API and then lastly the
2:36
geocoding API which is required for
2:39
converting your address into latitude
2:41
and longitude so I've already enabled
2:44
this as well so you need to enable all
2:47
these three apis so now we come to first
2:50
of all your inside your react Chas
2:53
project you have this main. index.html
2:56
file the global HTML file of your react
2:59
Chase project so here you need to paste
3:02
this script tag I've given all the
3:04
source code guys in the description of
3:06
the video so you can check out my
3:07
detailed blog post so you need to add
3:10
the script tag
3:13
and maps. gooogle ais.com
3:17
Maps API JS and after that you need to
3:20
replace the API key so this section we
3:24
are loading the Google Maps API and
3:26
after this key section here you need to
3:28
paste your API keys so so I've already
3:31
pasted it so what I will do I will
3:33
simply paste it
3:35
so now close this file come to your
3:38
component and for this specifically
3:41
react Chas there is a component here
3:43
that you need to install uh just go to
3:46
npmjs.com and just search for this
3:49
component which is react places
3:51
autocomplete so we are using this
3:53
component here uh you need to just
3:55
install this by executing a very simple
3:59
command which is npmi react places autoc
4:03
complete so I have already installed it
4:05
and it's almost got 130,000 weekly
4:08
downloads it's a very popular package
4:11
and they do offer a live demo as well
4:13
you can check out their demo so now to
4:16
get started here just create a simple
4:18
functional component and first of all we
4:21
need to import this package by using the
4:24
import statement so we simply say places
4:27
autoc complete which will be coming from
4:29
this package react places autocomplete
4:32
and apart from that we also need to do
4:35
the geoc coding so there is a geoc
4:38
coding packages are also there geoc code
4:40
by
4:41
address and get latitude and
4:44
longitude so these two components we
4:47
also need geoc coding and get latitude
4:50
longitude geoc code by
4:52
address and get latitude longitude so
4:55
just import that and after this we also
4:59
need to import my CSS file that I styled
5:02
it so what I will I will simply require
5:04
it so this app. CSS code you will find
5:07
out in the description of the video so
5:09
just also require the CSS code as well
5:13
so then after
5:16
that we come to
5:18
our jsx where we need to embed this so
5:22
we
5:23
simply inside this div section I will
5:26
align give some class name or auto
5:29
complete
5:32
container and then I will embed this
5:35
Google autocomplete component and it
5:37
actually takes some options so the first
5:40
option it takes is the actual value and
5:43
for this we need to declare some State
5:45
variables so just go to your state and
5:47
declare some State variables so this one
5:50
will be for address whatever address
5:52
that the user types we have the state
5:54
variable for this so for this we are
5:58
using you state hook
6:00
of react shares so initial value will be
6:02
nothing then we also need to basically
6:06
store a variable to store the place
6:10
information and initial value will be
6:12
null so we have declared two variables
6:15
for the address and the
6:17
place and
6:19
then now we need to Simply inside your
6:23
Google autocomplete component we
6:25
directly attaching the value here which
6:27
will be the address the user will type
6:30
and then we will need to attach an
6:32
onchange event handler so as soon as the
6:35
uh address changes we are attaching this
6:38
call back function which will execute
6:41
automatically so handle change next as
6:44
soon as you select
6:47
any address from the drop-down this
6:50
function will execute handle
6:52
select so now we need to Define both
6:55
these
6:57
functions first of all this your
7:00
handle
7:05
change so e parameter will get passed as
7:08
soon as you enter something in the input
7:11
field and then handle
7:13
select
7:15
so here the address will be passed here
7:19
so the user will select the address from
7:21
the drop down so this I think both these
7:24
function will be async so just make sure
7:26
that you put the async here this this
7:29
one is a Asing function this one is not
7:32
handle change so e parameter is there so
7:35
what we will do set address we will pass
7:38
the
7:40
address so here will be address will be
7:43
passed here so just make it so you're
7:45
simply setting the address whatever
7:47
address the user types right here and
7:49
then inside handle select what we need
7:52
to
7:54
do inside your handle
7:57
select we need to first of all set the
8:01
address to the selected
8:04
address and then inside your try catch
8:07
blog we will convert this address to the
8:10
latitude and longitude so you'll make
8:12
the geocoding API request so for doing
8:15
this we will use this component which we
8:19
imported so we'll declare a results
8:21
variable and await geoc code address
8:26
we'll use this component and pass this
8:28
address
8:30
you can see uh we are passing this geoc
8:32
code by address which is coming from
8:34
react places autocomplete so we are
8:36
directly using this function to convert
8:38
the address into latitude and longitude
8:41
so now we create a latitude longitude
8:43
variable and we again use this function
8:46
get latitude
8:48
longitude and whatever results are there
8:51
we are simply passing
8:54
this so here what we are doing we are
8:57
first of all fetching Geo coding the
8:59
address then we are getting this address
9:01
and then we are getting the latitude and
9:04
longitude so now we need to create this
9:07
place using the places API so we create
9:10
a object place
9:13
details and then it will have the name
9:16
of the place which will be results zero
9:19
and formatted address then we have the
9:22
formatted address we can easily get this
9:26
using results
9:29
0
9:30
dot formatted
9:34
address and similarly we can get all
9:37
these information which is the place ID
9:40
every place in Google Maps has a
9:42
particular place ID attached so Place ID
9:46
then we can get the geometry which will
9:49
be the latitude and longitude so we can
9:52
create a location object which will
9:54
latitude longitude
9:59
we'll store it latitude
10:09
longitude so all the source code guys in
10:11
the description so if you need the
10:13
source code you can go to the
10:14
descriptions we creating a location
10:16
object which contains these two
10:17
properties latitude and longitude so
10:20
after you do
10:23
this now we simply set the place by
10:27
using the hook function and pass this
10:29
place details so that's completes your
10:32
function now we come to the this this
10:35
one
10:38
so if you now just see your auto
10:41
complete will be working so if you
10:43
refresh now I think let me remove
10:50
this I think some error has taken place
10:53
which is saying this
10:56
props do children
11:01
is not a
11:12
function okay here uh you need to pass
11:15
the suggestions which will be coming I
11:18
think it is saying that we haven't
11:19
passed this so the suggestions you need
11:23
to pass
11:26
so get input props
11:31
so let me paste it and then explain to
11:33
you what is happening right here so this
11:35
autocomplete component expects this
11:38
input props you can see we are passing
11:41
the suggestions we are getting the
11:43
suggestions and here you type the get
11:46
input props placeholder enter an address
11:49
autoc complete input so then we show the
11:51
suggestions if you refresh it you will
11:54
see the suggestions will come as soon as
11:56
I write the
11:57
address you can you can see that so
12:00
these suggestions are coming and you can
12:02
select any address from
12:04
this and as soon as you select it we are
12:07
displaying these details which is name
12:09
formatted address Place ID latitude
12:12
longitude so you can go to the
12:14
description link guys if you need the
12:15
full source code thank you very much for
12:17
watching this video and also visit my
12:20
website free mediat tools.com uh which
12:24
contains thousands of tools regarding
12:26
audio video and image and I will be see
12:29
you guys in the next video