Custom Interactive Maps with the Google Maps API 10 Keeping Track of Map Markers Video Lecture | Customize Interactive Maps with Google Maps API for Website/App - App Development

within Google Maps there's actually no
way to natively keep track of your
markers so in this lesson we're gonna
create a collection and some methods to
add remove and find markers currently we
have two markers on this page and we can
keep track of them because we're storing
them in variables however if we were
loading multiple markers from a database
it would be really hard to keep track of
them individually we wouldn't be able to
just assign local variables to each one
so since that's not an option we have to
use an array inside of the constructor
function in our master library we'll add
a property for the markers and we'll
initialize it to an empty array so we'll
scroll down to where we're adding
markers and below that we're gonna
create a private function where we're
gonna push markers onto the array
and now we'll call this private function
from inside the public function so now
we've tapped into adding the array let's
go and log out the markers to the
console so we can console dot log the
map dot markers in here in the console
we can see that we have our two markers
so now that we can keep track of these
markers in an array we probably want to
be able to remove them as well so inside
of a map sir we'll create a private
remove function so the way we remove
this marker is we need to find the index
of the marker we're trying to remove and
then if that index exists inside of our
array we can splice it off so now that
we have the index well check to see if
it's not equal to negative one because
if it's not equal to negative one then
we know it exists inside of the array
and then inside of this check will
splice this marker off the array so
we'll start at the index and then we'll
just move over one and that just removes
this marker from the markers array so
let's test this out now we're calling
remove marker on the second marker we
created but we still see it on the map
so let's check to see the value of
markers in the console in the console we
see that we just have one marker so why
is it still appearing on our map all
we're doing right now is we're removing
the marker from the array we're actually
not removing it from the map so to
remove it from the map we can tap into a
function on the marker called set map
and we can pass through null and we can
see that the map updates and removes
that marker so a marker is actually
assigned to a map and a map is not
assigned to a marker and to remove the
marker from the map
you just know out the map property on
the marker so now that we can add and
remove markers we should create
functions where we can find markers by
certain properties in this case we'll
create a function that finds a marker by
its latitude in this function will set
up a for loop and loop through all of
our markers and we find a marker that
matches the latitude will return it so
inside of the loop definition we're
initializing VAR I equal to zero and
even though we're finding var I inside
the loop definition it's actually really
not being defined there
in JavaScript all variables are hoisted
to the top of the scope so actually it
looks like this so we can set var I
equal to zero at the top of the scope
and instead of including it in the loop
definition we can just leave that part
blank in right now this doesn't make
much of a difference but it's always
good to write the code the way the
interpreter is actually going to process
it inside of the loop will store the
marker that we're iterating over into a
local variable and if you're wondering
why we're not wasting this to the top of
the function scope it's because this is
actually at the top of the loop scope so
by coincidence we're actually hoisting
the variable to the proper spot so now
we want to check to see if the marker
we're currently iterating over has the
latitude that we're looking for and each
marker has a property called position
and then from position we can call the
LAT function and we can check to see if
that is equal to with a lot that we're
checking for and if that's true we can
return the marker so let's go to our
script file and test out this function
and we'll just copy the markers latitude
above and will log the results of the
console and the console we can see that
we get the marker that we are looking
for so it's good that we now have a way
to manage our markers however this is
kind of a basic way to do this right now
we can only find a marker by its
latitude and if we kept up this
convention by finding markers by a
property we would have to create a
custom function for every single
property to find the marker by so the
better way to handle this is to create a
collection that knows how to manage any
type of object and since it can manage
any type of object it'll be able to
dynamically find an object by any
property we'll go through and create
this custom collection in the next
lesson