Custom Interactive Maps with the Google Maps API 11 Advanced Marker Organization Video Lecture | Customize Interactive Maps with Google Maps API for Website/App - App Development

creating all the marker managing
functionality within the maps or library
can really clear things up and it also
muddies the responsibilities of the
library the library is really a resource
of common functionality that we do with
the Google Maps API if we want to manage
a collection of objects we should have
our own construct that knows how to do
that and this is known as the single
responsibility principle and a
responsibility is anything that has the
tendency to change so if you isolate the
responsibility to their respective
places it makes your code much easier to
maintain so in this lesson we're gonna
focus on creating a module that knows
how to manage any type of object and in
this case we're going to use it to
manage the markers so previously we
created this add marker remove marker
and find marker bilat function and
placing all these functions within the
map store library can really clutter
things up so let's go and create a new
file and we're gonna call it list AS
after our self and foking anonymous
function will start declaring our module
and if you remember we start by
declaring a self invoking anonymous
function and we store that to a variable
and then within that variable we declare
a constructor function will set the
prototype for the constructor function
and then we'll return the constructor
function itself so now this list
variable holds the constructor function
not the results of the constructor
function then we'll create our factory
method and now we have the boilerplate
for our list module so using this list
we'll be able to add and remove and find
any object of any type within it so the
list will have items within it so we'll
create a property for that and set it to
an empty array and then we're gonna need
our functions so we'll just create stubs
for those and we'll have one for adding
we'll have one for removing and we'll
have one for finding and the adding is
simple enough it's just this dot items
dot push and then we push on the item
and the remove isn't much more
complicated as well
we just need to get the index of the
item we're trying to find and we need to
make sure that that index is not equal
to negative one and if it's not equal to
negative one then we can splice the
items array so let's go and include this
script to our index dot HTML and back in
our list me to set the list to the
window down at the bottom and then
within map stir we'll import the list so
rather than setting this stop markers to
an empty array we'll create a new list
so now down in our add marker function
rather than saying this dot underscore
add marker we'll say this dot markers
dot add and then add the marker and then
down here we can get rid of this
underscore add marker and as far as the
remove marker goes we have the same code
in our list so we can get rid of this as
well so let's go to our script J s and
then down here let's console dot log map
dot markers just to see what we get
after we've added the two markers so in
our console we see you have a list and
it has an items property with two
markers in it and if we come down here
and check the prototype we can see we
have our add find and remove functions
as well so in our Maps our library we
have this function called find marker
bilat and this function would loop
through all the markers and return one
that matched the LAT we passed through
as the parameter and writing functions
like this becomes a problem because
every time we want to find a marker by a
specific property we have to create
another function so rather than doing
that we want to create a function that
can dynamically find an object by its
property so let's get rid of this
function and then we'll go into our list
J s and we'll start working on our find
so ideally we'd call find like this so
essentially we pass through a callback
function that returns an item as a
parameter and we check to see if that
items property is equal to anything we
want it to be so inside our callback
function this is where we
evaluate what we want to find our object
by so we don't want to pass through an
item for find we want to pass through a
callback so we're gonna create a
variable and we're going to call it
callback return because we want to be
able to store the result of the callback
then we're just going to alias the items
and then get their length and then we're
going to create an empty array for any
potential matches we may find because we
won't just find one item in certain
cases we can find multiple items that
satisfy the condition and since we're
going to be looping we're gonna set I
equal to zero up here so we'll begin our
loop and the first thing we'll do inside
this loop is get the results of the
callback the first parameter is the
first item that we're at in the
iteration and the second parameter will
just be that items index we don't need
that items index currently but we might
need it in the future and right now
there's no harm through passing it so
since the callback function evaluates a
condition it should always return a true
or a false so we'll do an if statement
to see if the callback return is true
and if it's true then we're going to
push it on to our matches array and then
once we're done iterating we're going to
return the matches array so now let's go
to our map stir j/s and now we'll create
a function called find by and then we'll
just call this that markers dot find and
we'll pass through the callback and then
we need to make sure that we're actually
going to return the value so we'll
create a variable to store the found
marker and then we'll call map that find
by and then we'll pass through our
callback function that returns the
marker as the parameter and then what
we'll do is we'll go into the second
marker and we'll provide it with an ID
and we'll set it to two and then what
we'll do is we'll return marker dot ID
is it triple equal to two and then we'll
log found to the console so you can see
that we have an array of just one marker
and if we open up that marker it has the
ID of two so we've created our function
that allows us to find a marker by any
property
but what if we want to delete that
marker from the map well if we go back
into lists we can do the same thing if
you remember if you need to delete
something from a map not only do you
have to remove it from the array but you
have to set the map to null for that
marker and we don't want to write that
into our list because our list is
agnostic of any object that's being
passed to it but what we can do is we
can fire off a custom function once we
found all the matches inside the find
function so below the loop we could
check to see if there's some type of
callback and we'll just call it action
and if there's an action we can say
action call will pass through this and
the matches so make sure to pass through
this action as a parameter and now in
our map stir we'll create a method
called remove by and remove by we'll
just take in a callback so we can call
fine just like how we are above will
pass through the callback and then right
here is where we can pass through our
own custom action so this action will
return us all the matches and in this
case those matches are markers so we can
take this markers array and we can call
for each function on it and this for
each function is just like doing a loop
except this callback function executes
for every single item inside of the
array so for each marker inside the
markers array we can then set the
markers map to null so now if we go to
our script J s we can call map dot
remove by and then we can pass through
our callback function and then we can
return the marker that has an ID that's
equal to two and you can see in our map
that that marker was removed and
something you may have noticed is that
there's a similarity of how we're
passing through callback functions and
how Java Script houses through callback
functions for the for each iterator so
if we create a random array if we want
to iterate through this random array we
call the for each method and this for
each method takes in the callback and we
can alert out each one of these items
so this concept of being able to pass
through functions as parameters is
extremely powerful because we can delay
the invocation of this function until we
actually need to fire it off so in the
case of removed by and find by rather
than having to create all of these
methods to find a marker by a property
we only had to create one function and
that was the fine function and once we
implemented that function we were able
to use it in multiple places we were
able to find all the markers you wanted
to remove and then set them off of the
map so in this lesson we created our own
list collection this provided us a way
to do more advanced adding removing and
finding of our objects and even though
we're working with map markers we
created this module to work with any
type of item we pass through callback
functions so we could delay the
invocation of them and fire them off
when they are needed and as time goes on
you notice that will get more markers
added to our collection as you can see
right here I created a loop that created
random markers onto the map and when we
zoom out they start overlapping on each
other and this amount of markers isn't
particularly useful will be more useful
is if we could cluster up all these
markers together when we got out to a
higher zoom so in the next lesson we'll
focus on creating these clusters