Up next in 10
Get the full source code of application here:
Show More Show Less View Video Transcript
0:03
Hello guys, my name is Goautam and in
0:05
this tutorial I will be showing you guys
0:06
about how you can display a simple
0:09
Google map onto your web page. And uh
0:12
let me start the tutorial. So basically
0:15
the requirements of the tutorial is that
0:17
first of all you need to be setting up a
0:19
local web server environment. I'm using
0:22
exam
0:23
and there should be a text edittor where
0:25
you can write code. So I am using
0:27
sublime text. So let me just go to
0:29
Google and type Google maps API.
0:36
So let me just go to this link
0:38
developers google.com/maps.
0:41
So here it will ask you on what platform
0:44
do you want to create your application.
0:46
So let me just select web. So the third
0:49
option and then just select this Google
0:52
maps JavaScript API
0:55
and then we just need to create a map
0:57
with a marker. So simple enough. So just
0:59
se select the first option. So adding a
1:02
Google map with a marker to your
1:04
website. So this is the aim of this
1:05
tutorial. So basically
1:08
if you read
1:10
it has given all the code that is
1:12
necessary. So so let me just copy paste
1:15
the code. It is not so much difficult.
1:19
So just copy paste the code and let me
1:21
just uh go to my editor and save this
1:24
file as index.html HTML in my app
1:28
directory. I'll copy paste the code. So
1:31
basically in this file what is happening
1:33
right now we are creating a uh div and
1:37
we are attaching a id of map. So in this
1:40
id in this div section we are displaying
1:42
our map and uh first of all we are uh
1:47
styling this div by providing a height
1:50
of 400 pixel and a width of 100 uh% so
1:53
that our map could be seen by the user.
1:57
After that we have included the google
2:00
apis.com/maps/
2:03
API. So there this is mandatory for
2:07
including the Google maps. So here you
2:10
can see here this is key is equal to. So
2:13
in this you have to include your API
2:15
key. So the process of retrieval of API
2:18
key is very simple. Let me show you. So
2:21
in order to use any Google API you need
2:24
to be retrieving the first of all the
2:27
API key for that. So let me show you the
2:29
process of retrieval of Google API. So
2:33
retrieval of the API keys. So for that
2:37
just go to Google and type Google
2:40
developers console
2:44
and just go to the second link
2:47
and then go to Google API console. So I
2:50
have also given the link in the
2:51
description. You can check here. So
2:53
first of all if you have not created a
2:56
project so just create a project and I
2:59
have created my own project or books
3:01
project. So in order to include any API
3:04
it is very simple. So let me just
3:07
navigate to Google maps JavaScript API.
3:10
So this is the API. So let me click on
3:13
that and I have already
3:16
enabled it. So if you have first of all
3:20
just visiting this web page. So there
3:23
will be option of enable. So just click
3:24
this option and it will change to
3:27
disable. So let me just go to my library
3:31
credentials in order to obtain the API
3:34
key. So as you can see here this is my
3:37
API key. So let me just delete it and
3:42
let me delete this API key and create a
3:44
brand new API key. So just go to create
3:47
credentials and API key. So now you can
3:50
see here your API key has been created.
3:53
So just copy this API key and paste it
3:56
here. Key is equal to. So just delete it
4:00
and paste it your API key and call back
4:04
is equal to init map. So basically what
4:07
is meant by this line is that a call
4:10
back function will run of init map. So
4:12
this is the function init map. Call back
4:15
function will run. this function will
4:17
run and it will basically display the
4:20
map for us. So this is the latitude and
4:22
longitude. So you may change these
4:25
coordinates. So let me just show show
4:27
you the map here. First of all, let me
4:30
just go to my directory that is
4:33
localhost
4:36
app
4:38
index html.
4:48
So as you can see here my map is visible
4:51
right now. You can see here
4:55
it the marker is there on Australia
4:57
because the coordinates of latitude and
5:00
longitude is -25.3631.044.
5:07
You may al you may also change the
5:10
position of the marker depending upon
5:11
the coordinates. So let me show you that
5:15
just search for let's suppose I choose
5:18
latitude longitude India.
5:25
So let me just type this
5:28
India lat.
5:33
So you can see here you can just copy
5:35
paste these coordinates.
5:38
So let me just change this latitude
5:42
and similarly longitude also.
5:51
So if I just save this and again refresh
5:56
my browser. So now you can see here the
5:59
marker is placed on India because I have
6:01
changed the uh latitude and longitude
6:04
coordinates. So you can place the marker
6:08
at any location depending upon just
6:11
changing the latitude and longitude
6:13
coordinates. Every country has its own
6:15
latitude and longitude. You can also
6:18
change it to full screen. So now you can
6:21
see here I am in full screen and you can
6:24
see the map here. You can drag drop. You
6:27
can drag the map and see all the
6:29
countries here. So this is a map view.
6:33
You can also shift to the satellite
6:34
view. So this is a satellite view.
6:42
You can also
6:45
zoom
6:47
by just pressing this plus icon here. Or
6:50
if you want to just minimize or zoom
6:52
out. So just click this minus icon. So
6:55
it will minimize or zoom out. So thank
6:59
you guys for watching this video. I
7:01
think that you'll like this video. So if
7:03
you have uh if you have learned
7:05
something from this video, please like
7:07
it and also don't forget to subscribe to
7:10
this channel for more videos like this.
7:12
And I will be seeing you in the next
7:14
tutorial. Until then, thank you very
7:16
much.