Custom Interactive Maps with the Google Maps API 06 Map Events Video Lecture | Customize Interactive Maps with Google Maps API for Website/App - App Development

so sometimes you're gonna want to
trigger off specific events when the
user interacts with the map in Google
Maps has a way for you to attach
listeners to certain objects such as a
map so the basic way to do this is
Google Maps is by tapping into the
library and we can call Google Maps that
events and then from here we can call a
function and this function is called add
listener and the function takes what
we're adding a listener to and this is
going to be the G map the type of
function and we're gonna add a click
function and then what happens on that
function and we're going to pass through
E as the event that gets fired off now
there won't be event fired off for every
type of event but a click will return an
event argument so when the map gets
clicked will alert click and then we'll
also log the event so we'll click right
here and we can see the alert box that
says click and now we'll check the
console and we can see in the console
that we have our event arguments and it
has a couple properties on it as well it
has a lot long that was clicked and it
even has the pixel coordinate that was
clicked so if we wanted to add another
type of event we can check out the
Google Maps API and we can see that
there's all kinds of events we can fire
off events when the balance has changed
the Center has changed click double
click drag drag and drag start you can
see that there's a lot that we can use
let's fire off one for drag end so when
we finish dragging on the map will fire
off an event so we'll copy this event
right here
and rather than pass-through click will
pass through drag end and it won't
return an event argument and we'll just
alert I have finished dragging so now
we'll click and we'll drag and we see
that we have I have finished dragging so
you can see it's pretty easy to add
events to the map however this is a
pretty verbose way of doing this you
always have to pass through the map
object your name and your events and
then the callback as well and this
google maps that event dot add listener
is pretty long so we can abstract this
into our map stir library so below the
zoom function on our prototype we'll
create another function that'll handle
these events and we'll call it
underscore on and the reason why we're
using an underscore is because we want
this to be private within our library
and the underscore is just the
convention for keeping it private you
can still use it outside of the library
but anyone who's using this will know
that they want to keep it inside of the
library just by using the underscore so
the perimeters this will take through is
the event and in the callback so this is
a Google Maps dot event ad listener
function and we can pass through our map
you can save this dot G map and then
rather than click will say event and
then right here we can just pass through
the callback so now in our main script
file we'll delete these events so now
we'll say map underscore on will pass
through click and then we'll do our
function and then we'll alert click so
now we'll click on the map and you can
see that we get our alert box so now
let's see if we can log the events out
to the console so we'll click we see
click now let's check our log and we see
that we still get that object printed
out to the console another thing to
check out is the value of this so inside
of this callback let's see what the
value of this is so we can see that we
have our event arguments but then we
have this big object down here and this
is the map object itself and rather than
having the map object maybe we want our
map store library so how can we change
the value of this and we can do that
with the call function so within our
Maps or library we have this callback
right here so rather than directly
passing the callback let's pass through
a function and within this function we
can call the callback function but
rather than just calling it like a
regular function we're gonna call the
call function on it and the call
function will actually execute this
function and the first parameter the
call function takes is what this value
will be so currently the value is the
map but we want it to be the map store
library so to assign that we'll go to
the top of the function and we'll create
a variable called self and we'll assign
it to this because outside of the
callback function this is the library
but inside the callback function this is
the map so now we'll pass through self
as the value of this and then we'll pass
through the event arguments as the first
argument that'll be returned
so now when we click will logout the
event arguments and then we'll log out
the value of this which should be the
map stir library rather than just the
map so we click right here we see click
and then in our log we see that we have
our event arguments and then we also
have our map stir library which also
contains the map so now that we've
abstracted this event listener out we
can add other events with it easily as
well we can add the Dragon function on
just as we did before and now when we
drag we get our done dragging alert box
and there's plenty of other functions as
well such as we can alert when there's
been a right-click and we also can alert
when the zoom level has changed so if
you go through the Google Maps
documentation you can see all these
types of events that you can fire off on
the map and now that we've abstracted
these events into our own library
they're very easy to fire off so now
that we can fire off events on the map
we're probably going to want to do other
things as well so the next lesson we're
going to be focusing on adding map
markers to the map