Up next in 10
Build a Angular Google Maps API Project to Embed Maps With Markers & Info Windows Using @AGMCORE
Jan 21, 2025
Get the full source code of application here: https://codingshiksha.com/angular/build-a-angular-google-maps-api-project-to-embed-maps-with-markers-info-windows-using-agm-core/ 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 guys welcome to this video so
0:02
in this video I will show you how to
0:04
integrate the Google Maps API inside
0:06
your angular project and display a
0:09
Google map in the browser and also you
0:11
have the ability to drag you can add
0:14
markers info Windows as well these red
0:17
markers so as you click inside the
0:19
location in the mad you can add these
0:21
markers and the ability as well you can
0:24
drag these markers to a particular
0:26
location like this using your mouse you
0:28
can drag these markers
0:30
and if you individually click on these
0:32
markers this info window will open right
0:34
here if you see so these are your red
0:37
markers this is your info window and you
0:39
also have the ability to drag these
0:41
markers to a particular location in the
0:45
map so there is a module specifically
0:48
for angular which integrates the angular
0:51
Google Maps API to actually embed these
0:54
Google Maps inside your application so
0:56
if you just search angular Maps
1:00
AGM it's called and it's actually the
1:03
very first result which comes right here
1:05
this is actually the package that we are
1:06
using angular Google Maps AGM and now to
1:11
get started it's uh the command is
1:14
simple you just need to install this mpm
1:16
install at theate
1:19
ag-core so in the description of this
1:22
video I have written a complete blog
1:24
post where I've given each instruction
1:26
in detail step by step so you can follow
1:28
this blog post alongside the video as
1:30
well so now to get started we will
1:33
actually delete everything and start
1:35
from scratch so let me just delete every
1:37
code right here and start from
1:44
scratch just wait let me just delete
1:51
everything let me just add here H1 which
1:54
is Hello World in the
1:56
template it's a simple angular project
2:00
no code is there so if you refresh the
2:03
browser you will see Hello World so we
2:04
are starting it from scratch so the very
2:07
first step we need to do we need to go
2:08
to your command prom as I already told
2:10
you you need to install this so simply
2:12
install this I've already installed it
2:14
so now to register this module you need
2:16
to go to your app. module. TS file
2:19
typescript file so now you need to edit
2:22
this file so right here you will add the
2:25
import statement to import this module
2:27
so we simply say import a
2:31
hm core module and it will be coming
2:35
from this
2:37
package so we add this import statement
2:40
size is 10.92 kiloby so now we come to
2:44
the Imports areay and here we need to
2:46
add this package so we simply say AGM
2:50
core module and it contains this for
2:53
root function and here we specify the
2:55
API key so here you need to paste the
2:58
API key so you will get from Google
3:00
Cloud console these API key so first of
3:03
all you need to go to your library and
3:05
enable the Google Maps JavaScript API so
3:09
just search for Google Maps right here
3:12
and this set of API you need to enable
3:15
which is Maps JavaScript API so just
3:18
click on enable I already enabled this
3:21
API then you need to go to API Services
3:25
credentials and then create an API key
3:29
simply click on this API key then it
3:30
will create this API key for you I've
3:33
already created one so I will simply
3:35
copy this and paste it right here so
3:39
this completes the configuration part so
3:41
now you can close this file now we come
3:44
to the app. component.ts file so right
3:48
here we import this mouse event which
3:52
will be coming
3:54
from AGM so when you click on the map so
3:58
this mouse event is is there from this
4:00
package now we need to declare some
4:03
variables to actually embed the map so
4:06
Zoom will be a number and eight will be
4:11
the value so we have declared a variable
4:14
zoom and initial Center position inside
4:17
the map so when we load the map we need
4:19
a simple coordinate which is latitude
4:21
and longitude so we are simply putting
4:24
these creating these two variables
4:26
latitude
4:28
longitude and now to
4:30
actually embed this map it's very easy
4:34
we come to the JS or sorry this template
4:38
file app. component. HTML and simply
4:41
instead of this in order to embed this
4:44
map we simply use this component AGM Das
4:50
map and inside this you actually provide
4:54
the
4:58
parameters which is your your
5:02
latitude which
5:07
is we have the variable latitude and
5:09
then same goes with the longitude as
5:14
well we have the variable for longitude
5:17
as well so zoom level it also takes so
5:21
we have the variable all these three
5:23
variables we have declared in the
5:24
typescript file so we are directly
5:26
passing it in the side template so these
5:29
three variable we are passing it so this
5:32
will actually display the map but we
5:35
also need to style this map so go to
5:37
this file app. component. CSS file so
5:41
just we need to give it a height to this
5:44
map so that we can clearly see in the
5:46
browser so height will be 100 vertical
5:50
Heights so just add the CSS so if you
5:53
try to refresh your application you will
5:55
see this Google Map will get added and
5:58
you will be able to ability to scroll
6:00
zoom in to a particular location as well
6:02
so if you want to add a marker here
6:05
initial marker so you just need to
6:08
provide some coordinates so now go to
6:11
your app. component.ts file so if you
6:14
want to add a marker we will just
6:16
declare an interface right here
6:18
interface marker and it will have four
6:21
properties the latitude the
6:24
longitude and then the
6:27
label which will be a string
6:31
and then draggable so you can even drag
6:34
that marker as well so it's a Boolean
6:37
parameter so we just declared a
6:39
typescript interface which has four
6:41
properties latitude longitude label and
6:44
draggable so now we need to use this
6:46
interface inside the typescript code so
6:49
we just need to make a array of markers
6:53
based on this interface we declare this
6:56
markers
6:57
array which is of the type this marker
7:01
array so we declare this so each object
7:04
will have four
7:06
properties so let me have the first
7:10
marker which has the latitude longitude
7:13
label a dragable
7:17
true so now do we have one marker so we
7:20
have declared this in typescript so now
7:22
we come to the template code right here
7:24
app. component. HTML so now to display
7:27
these markers
7:29
we can directly pass a component right
7:32
here which is AGM Das
7:36
marker and we Loop through all the
7:38
markers so we use this directive inside
7:41
angular which is ng4 so right here we
7:46
use like this star ng4 and we Loop
7:50
through let M of markers and let I is
7:56
equal
7:57
to index
8:04
and then we basically
8:06
embed all these four
8:09
properties one by one so like
8:14
this here you are passing this
8:17
latitude the longitude then the actual
8:21
label
8:30
and then this marker draggable so all
8:32
these four properties we have declared
8:34
inside this object so if you see refresh
8:37
it you will see this marker will be
8:39
there at this position in the map so
8:41
whatever latitude longitude you put
8:43
right here it is in Germany you'll see
8:44
that you can now drag this marker as
8:47
well so so now I need to add ability so
8:50
that as I click the map at a particular
8:53
location I need to add a marker
8:55
dynamically so for doing that uh we need
8:58
to bind an on click list to the map so
9:00
right here in the app. component. HTML
9:03
so right inside this for
9:07
Loop we can bind a
9:11
simple like just you can put right here
9:15
a property which
9:18
is marker click so we can bind this on
9:22
click listener to the map so we can
9:24
declare a function click marker and we
9:28
pass the label
9:30
and the actual markers so we have
9:32
basically binded this on click listener
9:33
to the map marker click and we have
9:36
binded this custom function and we are
9:39
passing these two properties now we need
9:41
to Define app do this function inside
9:44
app. component.ts
9:46
file
9:48
so we simply go right
9:55
here
9:56
so whatever is your click mark marker
9:59
this is your function so we Define this
10:02
function clicked marker and we are
10:05
passing two properties the label and the
10:15
index so you can console log message map
10:18
clicked
10:30
so if you
10:32
click click the map here you will
10:40
see uh I
10:49
think we do need to actually Define I
10:52
think I forgot to
10:59
okay this is for the marker so when you
11:01
click the marker uh basically what
11:03
happens so this is for the marker this
11:06
red marker that you click so you will
11:08
see that so this console loog message so
11:11
whenever you click the marker this will
11:13
execute so but we need to add the Mark
11:17
we need to add The Listener to the map
11:19
so for adding to the
11:21
map we need to bind onto the
11:26
map so for adding it to the map we need
11:29
to
11:31
bind right here so at globally structure
11:34
we need to say map
11:42
click so when we click the map we
11:44
declare a function map clicked and we
11:47
pass this event as an argument so we
11:50
actually binded globally to this AGM map
11:54
this map click so we C now need to
11:57
Define this function so which is map
12:03
clicked right here we can Define this
12:06
which is map clicked you pass the event
12:11
which is actually a mouse
12:13
event and this you add a marker you push
12:17
a marker inside this array so each
12:21
object will have these three properties
12:23
which is the latitude longitude and the
12:25
dragable to true so
12:30
we can get the coordinates from this
12:31
event object so we get the latitude
12:33
longitude as soon as the user type
12:36
clicks on the map so if you refresh now
12:39
so now what happens if you click on the
12:42
particular location you will see the
12:44
marker will get added and now for
12:48
showing the info window whenever you
12:49
click the individual
12:51
markers that info window it's very easy
13:00
we come to the app. component. HTML
13:06
file so right here for showing the info
13:09
window right inside this we have this
13:12
component AGM Das info
13:16
window and here we can actually show a
13:19
simple message that info
13:23
window content so as soon as you click
13:26
the map this info window will open
13:30
so you will see that so as soon as I
13:31
click this
13:36
marker so this is a complete project
13:39
guys that we built how to integrate
13:41
Google Maps inside angular with this
13:44
nice little module I showed you step
13:45
bystep instruction if you need the full
13:47
source code uh this full you can go to
13:51
my description link where I written a
13:53
complete step by-step block post if you
13:55
still face any kind of Errors you can
13:58
clone the GitHub repo and get the full
14:00
source code so thank you very much for
14:03
watching this video and please hit that
14:04
like button subscribe the channel and
14:07
also visit my website free mediat
14:09
tools.com uh which contains thousands of
14:12
tools regarding audio video and image
14:15
and I will be seeing you guys in the
14:17
next video
#Maps