Up next in 10
Angular Tutorial to Integrate Google Maps API to Render Maps With Markers @angular/google-maps in TS
Jan 24, 2025
Get the full source code of application here:
https://codingshiksha.com/angular/angular-tutorial-to-integrate-google-maps-api-to-render-maps-with-markers-angular-google-maps-in-ts/
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 JavaScript API
0:07
inside your angular
0:09
application and as you click inside the
0:12
map here you will see you will be able
0:13
to add these red markers so wherever you
0:16
click inside the map on the click of the
0:19
event the marker will be added these red
0:22
markers and there is a specific specific
0:25
package in angularjs which angular which
0:28
allows you to embed these Google Maps so
0:31
if you just go to npmjs.com just search
0:34
for this package at theate angular Das
0:38
Google
0:40
Maps so this is actually a specific
0:43
package which allows you to connect with
0:45
Google Maps API so the command is simple
0:48
you install this package right here I've
0:50
already installed it and it's almost
0:52
having 178,000 weekly downloads so once
0:56
you install this I have written a
0:57
complete step by-step blog post on my
1:00
website as well the give the link is
1:02
given in the description so now you need
1:05
to go to your app. module. typ script
1:08
file of your angular project and first
1:10
of all you need to import this module so
1:13
you need to add this import line so we
1:15
simply say here import and then we
1:18
simply import this module Google Maps
1:21
module which will be coming from this
1:23
package at the angular Google Maps so
1:26
simply import this line and then go to
1:28
the Imports array and simply import this
1:32
Google Maps
1:34
module and now for registering this uh
1:38
Library you also need to go to the
1:40
index.html file of your angula project
1:43
and here you need to paste the
1:46
CDN which is required here and also
1:49
right in the API key you need to go to
1:53
the Google Cloud console and uh simply
1:56
create an API key I've already created
1:59
this API key so I will
2:01
simply copy from this and simply paste
2:04
it in the key parameter you can check
2:06
this CDL I have given the block post
2:09
step byst step instruction is given so
2:11
you need to paste the CDN and paste your
2:13
API key and now we come to the app.
2:16
component. typescript
2:20
file and one more thing you do need to
2:22
enable this API so go to the library
2:25
section and enable
2:27
the the API that is necessary for this
2:30
project so simply search for maps
2:34
JavaScript and you need to enable this
2:36
API uh which is Maps JavaScript API I've
2:39
already enabled this API so now after
2:42
enabling this API you need to go to the
2:45
app. component.ts file this is your file
2:48
so right here now to render the map it's
2:51
very simple you declare the
2:54
coordinates where the map will be
2:57
displayed and for this we use the L
2:59
itude longitude literal and here we
3:02
specify the latitude and the longitude
3:05
so this will be the default
3:08
location so when you refresh your
3:10
application the map will be there at
3:13
this location which contains this
3:14
latitude and longitude and then you can
3:17
specify a zoom parameter so how much
3:20
Zoom that you want to do inside your map
3:22
so I will specify the zoom to
3:26
be2
3:28
and after
3:30
this now you come to the app do
3:33
component. HTML file so right in this
3:37
file to enter the map we will use this
3:40
directive which is
3:42
google-map this component and it
3:45
actually takes some parameters first of
3:47
all the location on which you need to
3:50
render the map so the coordinates are
3:52
located in this Center if you see we
3:55
provided the center variable so we are
3:57
simply using it in the template we are
4:00
simply providing this as an option and
4:02
then the second option is the zoom level
4:05
so again this variable we have declared
4:07
it the zoom to be 12 so we are directly
4:09
using it as a
4:11
coordinate as an option so if you
4:14
refresh your
4:16
application and refresh you will see
4:19
that the map will be displayed at this
4:21
San Francisco location so this is
4:24
actually having this latitude and
4:25
longitude and you can control the zoom
4:27
level so if I increase the zoom level
4:31
let's suppose I changed from 12 to 18 so
4:34
now again the map will be again be
4:37
zoomed so we have all these controls you
4:39
can zoom out zoom in you can change to
4:41
full screen map and you can drag and
4:45
move to any location inside the world so
4:48
in this way you can renter the map so
4:50
now we need to bind an onclick listener
4:53
to the map so that as I click on this
4:54
particular location in the map I need to
4:56
add a red marker and now for integrating
5:01
that functionality so we need to here
5:04
provide a onclick listener map click so
5:08
as soon as you click on that map we need
5:10
to bind an custom function on map click
5:14
so we will pass this event so as soon as
5:16
you click this map we have binded this
5:18
function on map click so now we need to
5:21
Define this function in the app.
5:23
component. typescript
5:26
file so here we specify the location so
5:31
the marker location so it will be Google
5:36
maps. latitude longitude
5:45
lateral and we also specify the title as
5:48
well so we declare this markers
5:52
object and then we write this function
5:55
which is on map click so as soon as you
5:58
click on the map that marker will be
6:04
added so here we get the latitude and
6:08
the longitude with this event
6:12
object and we convert the position to
6:16
Json like
6:20
this and then we add the marker and push
6:24
inside this marker array and here we
6:28
specify the position as well as the
6:30
title so you can even give it a custom
6:33
name so marker added at this location so
6:36
which is having position latitude and
6:39
longitude so if you add this code now
6:42
and as soon as you click the
6:49
map let me change the zoom level to be
6:53
from 18 to
6:56
12 so
7:12
uh I think I need to refresh the
7:13
application
7:18
here oh the marker is not showing
7:21
because we also need to make change
7:23
inside app. component. HTML to display
7:26
the markers we have a pre-made component
7:28
available using this package which is
7:31
called as map marker and we'll be
7:33
looping through all the markers which
7:35
the user will add and we'll for this
7:37
we'll be using the NG for directive and
7:41
we will Loop through the markers let
7:42
marker of
7:45
markers and we will specify the position
7:48
of the marker which is located inside
7:51
marker position and the title which is
7:54
located in the marker. title so we
7:57
specifying these two properties and if
7:59
you refresh now as soon as you add the
8:03
click the map it will also show you the
8:05
location the
8:08
marker so in this way you can integrate
8:11
the Google Maps API inside angular using
8:14
this package and as you click you can
8:17
see the red markers is showing and also
8:20
it specify the location as well using
8:23
this info window as well so you can view
8:25
it on Google
8:27
Maps so this is actually the back page I
8:29
showed you step by-step instruction if
8:31
you still need the full source code you
8:33
can refer to my blog post which is given
8:35
in the description of this video and
8:37
thank you very much guys for watching
8:39
this video and also check out my website
8:41
as well free mediat tools.com uh which
8:44
contains thousands of tools regarding
8:46
audio video and
8:48
image and I will be seeing you guys in
8:50
the next video