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

so previously we're adding map markers
to the map but we were having some
difficulty with customizing them through
the parameters every time we wanted to
customize a property in our method we
had to add another parameter and this
made things quite long and then also
adding any events would be very
complicated this way as well
so in this lesson we're gonna go through
we're gonna fix this method and we're
also going to be able to add events to
our markers so these are the two methods
that we had to add multiple parameters
to just to customize our marker and in
our main script file this is where we're
passing through our values and also it's
not very clear what these values are is
this the longitude is this the latitude
and what is this true mean so rather
than pass it through like this we can
create one parameter and that'll be the
options and this will be just a little
different than the default map options
because rather than the map options that
Google expects we can pass through the
map options that we expect so we can
pass through the lat
the long whether we want it draggable
and we can even provide the icon so now
we'll go into our map stir library and
then we'll get rid of all these
parameters and we'll just call it opt s
for options and then right here will
modify the options will set the value
for the position and then we'll pass
through the options and they create
marker function and the only thing we
need to do inside the crepe marker
function is set it to the map and now
you can see that we have our customized
marker so every time we want to change
something on the marker we don't have to
add another parameter we just need to
add something onto the options object
literal so in this object literal we can
add another property we can set its
visibility and we can set it to false
and then it disappears from the map but
when we turn it back to true it
reappears and another thing we can do
too is we can add our own custom options
onto this so if we wanted to give it an
ID in this case we'll give it an ID of 1
so if we go into map stir and if we
console dot log they create marker
function we can see in the log that we
have an ID of 1 so even though the ID
property isn't something supported by
the Google Maps library we can still add
it for our own custom views so now that
we're adding through our own custom
options we can also pass through it
so the way you add events onto a marker
it's just the same way that you would
add on to a map up here we're calling
Google that maps that events that add
listener and we're adding it on to the
map and the way we do it for a marker is
just by adding it on to the marker so we
actually can refactor this function to
use any type of supportive object rather
than just the map and we can do that by
getting rid of these parameters and just
pass through options as we did below so
if the listener will say options dot
object and we'll set options dot events
and then as well as options that
callback so now when we're adding a
marker we can check to see if there's an
event and if there's an event then we're
gonna want to fire it off and we can do
this by calling the vista underscore on
function and since this now takes in an
object we'll pass through this object
literal and we can pass through the
object that expects to act on and in
this case it'll be the marker but right
now we don't have the marker and that's
because we're creating the marker down
at the bottom so let's move that below
the options and then let's return the
marker and because of JavaScript hosting
let's create a marker at the top of the
add marker function and for those who
aren't familiar with hoisting within
JavaScript it's a feature that adds all
the variables it's at the top of the
scope so even if you declare this VAR
marker down at the bottom it always gets
added up here when it's gets interpreted
by the browser and this can be very
confusing during certain parts of your
code so always try to declare your
variables at the top of the scope even
if they haven't been defined yet as in
this case so we're setting the marker
variable at the top and then we'll
initialize it down here to the create
marker function so our object will be
the marker and then we just need the
events and in this case we'll go to the
options and we'll call the event name
and then we'll also set the callback
property so now in our main script file
we'll create an event object and the
event will have a name and in this case
it'll be the click event and then we'll
also set a callback and the callback
will alerts
I'm clicked so now we'll click on this
marker and we can see that we get on
clicked we can even change this and we
can change it to drag end and we'll
change the alert so I'm done dragging
and now when we drag it down we get the
alert box
after it's finished dragging so by
providing options we allow our markers
to be customized just through an object
literal rather than writing all this
code surrounding the marker so
everything that this marker needs to do
is contained inside of this object
literal so now that we know how to fire
off events on markers we might want to
know how to open up an info window so
when we click on this marker we'll see a
little window that pops up that gives us
more details about the marker we clicked
on so in the next lesson we'll focus on
info windows