live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Build a Vue.js 3 Google Maps API to Embed Google Map & Add Markers Using vue3-google-map in TS
Jan 17, 2025
Get the full source code of application here:
https://codingshiksha.com/vue/build-a-vue-js-3-google-maps-api-to-embed-google-map-add-markers-using-vue3-google-map-in-typescript/
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 a package
0:04
inside vuejs 3 which is used to display
0:08
the Google Maps inside your application
0:10
and you will be able to add markers as
0:12
well so if I click on a particular
0:15
location inside Google Map I will be
0:17
able to add these red
0:19
markers so I will show you a package
0:22
here which is open source package in
0:24
vuejs 3 the latest version which allows
0:27
you to embed this Google Maps using the
0:29
Google Maps
0:30
API so if you search for the package
0:34
here which is called as view3 Das
0:39
Google Map so this is actually the
0:42
package here if you go to npmjs.com just
0:45
search for this package the command is
0:48
simple I've already installed it so it's
0:50
almost got 42,000 weekly downloads so
0:54
they also have a official website as
0:56
well so you can go to this website to
0:59
check out their doc
1:00
mentation lot more examples are given so
1:04
I have given all the source code in the
1:06
description of this video so you can
1:08
check out the source code so now to get
1:10
started you need to edit your app. viw
1:12
file of your project so simply go to
1:15
this file and we will simply first of
1:18
all write the types script code in the
1:21
script tag and then our template which
1:24
will be the HTML code so right here we
1:27
will just add this attribute setup
1:30
and first of all we need to require the
1:32
necessary packages first of all the
1:34
reference which will be coming from View
1:36
and then the actual third party package
1:39
for embedding Google Map Google Map plus
1:43
the marker which will be coming from
1:44
this package view
1:46
3- Google
1:48
Map so using this import statement we
1:52
first of all require this module very
1:54
simply and then here we need to actually
1:57
tell where we need to add the marker or
2:01
the center of the map so this will be a
2:03
simple object holding two properties
2:06
which is the latitude and the longitude
2:08
so these are the positions inside the
2:10
map that you need to add or render the
2:14
map so this is your latitude and then we
2:17
also need to provide the
2:20
longitude so each location in the map
2:24
has this
2:27
coordinates so we have provided this C
2:30
of the map so as we load the map it will
2:32
be located inside this position so after
2:36
this we also need to provide the zoom
2:38
level so I will set it the zoom level to
2:40
be 15
2:43
so so now to display first of all the
2:46
map here we use this component which is
2:49
Google Map directly and it actually
2:51
takes some attributes first of all it
2:53
takes your API key so you need to
2:56
replace the API key and for that you
2:59
need to first of all will create a
3:00
Google Cloud console account I've
3:02
already created one and then you need to
3:04
enable the Google Maps API go to library
3:08
and search for this API which is Google
3:11
Maps API and just enable this API I'm
3:15
talking about this API which is Maps
3:17
embed
3:19
API we are embedding the Google Map so
3:23
you need to click on this enable option
3:31
I think this one is not I think this one
3:34
I think map static API you need to
3:37
enable this API I
3:41
want I think if I search for Google
3:45
Maps yeah so this this one Maps
3:48
JavaScript API there are lot of versions
3:51
of Google Maps API this one you need to
3:54
enable it because we are simply adding
3:57
the map to the website so I already
4:00
enabled this API you can see API enabled
4:02
you just need to click the enable button
4:05
so after you enable this API and now we
4:08
just need to create the API key
4:10
credential so
4:15
just go to your API services and you
4:18
will find this option credentials and
4:20
just click on that and here you need to
4:23
paste your API
4:25
key so this will be different for you so
4:28
don't copy my API key
4:33
so I have already created one API key so
4:35
it's very easy to create you just need
4:37
to go
4:38
to this is option will pop in create
4:41
credentials and then there will be this
4:43
option API key simply click this and
4:46
then it will create your API key so just
4:50
copy the API key that it will generate
4:52
so simply copy to clipboard and simply
4:55
paste this API
4:57
key and then you need to give it a style
5:00
attribute so you can give it a fixed
5:03
width to the map here let me give full
5:05
screen which is 100% and a height of
5:10
also which is 100 VH viewport height and
5:15
then we'll be centering the map to the
5:17
center object we have latitude longitude
5:20
provided and then the zoom level we
5:23
also have this
5:26
variable and these four options it takes
5:28
API keys style Center and zoom if you
5:31
refresh your application you will see
5:33
this Google Map will
5:35
display and you can zoom in zoom out at
5:38
a particular
5:40
location so it's that easy to add Google
5:43
Map inside a website so now if I click
5:45
on a particular location now to add red
5:48
markers you can bind an onclick listener
5:51
to the Google Map simply add this
5:53
onclick listener at theate click so when
5:56
we click the map we will bind this
5:59
custom function which will be add marker
6:02
so it will add a red marker to
6:05
the so we need to Define this function
6:08
here which is ADD marker so it will add
6:11
a
6:12
marker this event will automatically be
6:15
passed as you click the map it will hold
6:19
information and here we need to capture
6:21
the latitude and the longitude
6:23
coordinates from this event so event do
6:27
latitude
6:28
longitude and then inside markers we
6:32
have to push and for this we need to
6:35
create a markers areay so just create at
6:38
the top here globally a
6:41
variable so by default it will be an
6:44
empty array so we just pushing this
6:46
value inside the markers array so
6:48
markers. value.
6:50
push so we're pushing a
6:53
position uh property here which will be
6:56
holding our latitude
7:00
you can easily get the latitude by this
7:02
latitude function and then the longitude
7:05
easily
7:06
by the longitude so you're pushing this
7:10
inside the markers array the position
7:12
object which gets the latitude and
7:13
longitude using this event
7:17
parameter and after this you also need
7:20
to provide a label so we can simply say
7:23
it's a new
7:24
marker and you can give it a
7:27
title marker at this
7:39
position so mainly these title and label
7:42
is not required but we are just giving
7:44
it optional these properties label and
7:47
title main property is this position
7:49
property where we add the marker so now
7:52
to display those markers because if you
7:54
click
7:56
it markers will still not display so as
8:00
I binded this on click list now the
8:01
markers you will not see so for
8:04
displaying those markers just outside
8:06
this just inside this Google Map
8:10
component we need to now render all the
8:11
markers for doing this we use the marker
8:14
component that we imported and here we
8:18
use the V for Loop
8:20
directive and what we do is marker index
8:24
and we Loop through all the markers one
8:26
by
8:28
one like like
8:33
this and we also provide a key parameter
8:36
which will be the
8:38
index and then we also provide the
8:40
options here which is contained inside
8:43
this
8:44
marker so we are running this V4 Loop we
8:48
are rendering all the markers providing
8:49
a key and the options as well so if you
8:52
now click on a particular you will see
8:54
now it it's displaying so if you click
8:59
at a particular location you will see
9:01
you will be able to add markers so this
9:04
Library supports many components info
9:06
Windows as well so they you can check
9:08
out their documentation it's very handy
9:11
you can full screen as well all these
9:13
controls you can change to satellite map
9:16
as
9:17
well so you can check out their
9:20
documentation it's pretty well
9:23
documented with all the examples given
9:26
on there
9:31
on their website so if you need the full
9:34
source code of this example you can go
9:36
to the description link on my website to
9:38
check out the full source code and you
9:39
can check out their documentation all
9:43
these components are there so thank you
9:46
very much for watching this video and do
9:48
check out my website as well uh free
9:50
mediat tools.com uh which contains a
9:53
thousands of tools regarding audio video
9:55
and IM and I will be seeing you guys in
9:58
the next video