Custom Interactive Maps with the Google Maps API 13 Dealing with Multiple Events Video Lecture | Customize Interactive Maps with Google Maps API for Website/App - App Development

so currently we can add events to a
marker through our library all we have
to do is pass through an object literal
and give details about the events in the
action to take on that event so in this
case when we click on this marker will
get click alerted to us so in addition
to having this click event we might also
want to drag end events since this
markers draggable but the way our
options are set up is that it only takes
this one event in so in this lesson
we'll go through and we'll change this
to allow us to add multiple events so
how do we change this from taking in a
single event to allowing multiple events
we'll rather than just adding one object
we can allow multiple and we can support
multiple objects with an array so if we
wrap the object in array brackets and
then we'll copy it and we'll create
another events as well and the second
object will be for the drag and event
and now since we're passing through more
than one events we can change this from
event to event so if we click on our
marker we don't actually get an event
firing off and that's because our
current API doesn't know how to deal
with an array of events so we'll go into
our map stir library and then within our
add marker function we can see we're
checking to see if there's an event and
if there's an event we're firing it off
with this underscore on function so we
need to change this from firing off from
one event to multiple so first we want
to check to see if there's any events
and if the options contains the events
object then we want to loop through it
and attach each one of the events so if
we call the for each function on the
events array we can attach each event as
we loop through but currently we're
gonna have an issue with this right here
because this is not the master library
inside the for each function so up here
or creating our variables we can assign
self to this so this way we know that
we'll have the reference to our map
store library so now if we go and we
click on the marker we're still not
getting a click event so let's check out
the console so in the console we can see
we get an uncaught type error and it
tells us that undefined is not a
function so when we click to see where
the source is we can see we get it on
this dot underscore on so let's log this
to the console to see
what it is when we're inside the for
each so in this case this is the window
and we need that to be the map store
library so let's go back and change that
so to make this refer to the map store
library there's a little trick we can do
we can store a variable called self to
this and so inside the for each we can
say self dot underscore on
so now we'll click the marker and we get
the alert box and now we'll drag the
marker and we get the dragged alert box
so we're now able to deal with multiple
events for markers but we aren't able to
deal with multiple events for the map so
we can easily abstract out this function
to our library and then we can reuse it
for any object that can handle events so
we'll create a function and we'll call
underscore attach events and then I'll
take in the object that we want to
attach the events on to and then the
events themselves so this is the same
block of code from above or calling the
for each function on the events array
and we're attaching each event as we
loop through so now up here we can
change this block of code and we can
just call this dot attached events so
we'll pass through the marker because we
want to attach the events onto that
object and then we'll pass through the
events themselves and down on our attach
events function we need to change this
from saying marker to object so when we
click we get clicked and now when we
drag we get dragged let's make sure that
our event arguments are still accessible
as well so inside the callback or logout
the event argument so now when we click
you can see that we get our event
argument however there's one thing that
we could add to this function to make it
a bit more useful and that's actually
returning the object that was clicked so
in this case we're adding a marker to
the map but we actually don't have
access to this marker until the function
has been returned inside of this marker
to variable so what would be useful is
we could provide the second parameter
and whenever this callback is fired off
we have access to the marker so in our
map store library up in our underscore
on function all we have to do is pass
back the options object inside the call
function so now when the callback
function is being fired off we'll return
back any event arguments
and then will also return back the
object that the event was fired off on
so in our main script file will log the
event arguments and then the marker as
well you can see right here we have the
event arguments as well as the marker so
in this lesson we were able to change
our add marker function from adding just
one events to adding multiple events and
we did this by providing an array of
events and also in our map store library
we took this function and abstract it
out so it can be used for any object
that supports events such as a map and
to get more control on our event
listener we pass through the object that
the event was being fired off on in our
callback handler so now when we need to
add multiple events to an object it's as
easy as going through and passing
through an array of events