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

so in the previous lesson we found a way
to do more advanced organization of our
map markers so now that we know how to
dynamically find and remove markers we
need to be able to display several of
them and the problem with that is is
once you have several markers in a small
area they can overlap onto each other
but we can fix this problem with
clustering so in our main script file we
have a loop that adds markers two random
points on the page we have a base Latin
long but then we add a random number
onto that to randomize its location for
each loop we add two markers and we do
that 40 times so we have 80 markers onto
the page and as you can see at the zoom
level there's a couple of places where
markers are overlapping on to each other
and that makes some of these markers on
clickable so right here I can click on
this one but when I want to get to the
blue can behind it it's a little more
difficult to do so and then as i zoom
further out the markers bunch up even
more together and if i zoom out even
more most of them are absolutely unclick
Abul so we can solve this issue by
setting marker clustering so clustering
doesn't come into Google Maps by default
you actually have to add an extra
library so this is an example of a
cluster we can see that we have these
little circles that have these numbers
in the center of them and they represent
how many markers are inside of that
cluster so if we click on this for when
we zoom in we get these three right here
but then we also have more markers right
here for this to cluster and we click in
we see those two and then as we zoom out
when the markers get closer they cluster
in so this is a much easier way of
displaying markers onto the page to set
up clustering within Google Maps you
actually have to download a separate
library because it doesn't come by
default so at this Google code website
the library is called Google Maps
utility library v3 now there's a ton of
useful libraries listed here such as the
day/night overlay but we're only
interested in this marker clusterer
so we can click down here on the
released versions we can click on 102
a source and then right here we have
marker clusterer in the compiled version
as well since we're just going to be
working in a development environment I'm
going to take the uncompelled version so
I'm gonna copy this and I'm going to add
it to our plunker I'm gonna call it
marker cluster J s and then I'm gonna
paste in that code and in my index.html
file I'm going to add it right below my
Google Maps reference so now that we
have this reference let's go into our
map stir library and we'll start setting
up for our cluster and a cluster is an
object that's constructed through a
constructor function just like
everything that we've worked with so far
and we're gonna add this marker
clusterer as a property to our master
library and the reason why we're going
to set it as a property is because we
need to access it within functions
inside of the library so we'll add it on
as a property and so we initialize it by
saying new marker clusterer and you can
see that we don't actually say Google
Maps that marker clusterer and this is
because since it's in a separate library
it's not attached to the Google Maps
namespace so this constructor function
will take the map that we're working
with it'll take in any of the markers
that we want to cluster in this case we
don't have anything so we'll pass
through an empty array so to get these
markers the cluster up we need to add
them on to the cluster so when we're
adding markers down in our add marker
function we can tap into the marker
clusterer so the marker clusterer has an
add marker function and we just need to
pass through the marker to get it onto
the cluster and you can see right here
that we already have these clusters we
have these two stray markers right here
but that's because they don't overlap
onto anything so they don't need to be
clustered but as we zoom out they get
sucked into the cluster we have this
marker right up here and if we zoom
further out it gets sucked into the
cluster as well and now you notice that
the clusters actually changed colors and
that's because when clusters get more
dense
you can change what color they are and
when we zoom out we get even fewer
clusters and then when we get to the top
we see the 81 total markers we have and
then if we click on the cluster we get
centered
all the smaller clusters in the area and
we can click on those clusters from
there as well so now you might be
wondering how you control the color of
the clusters and just as we've passed
through options to a marker we can pass
through options to the marker cluster so
up in our constructor function we can
actually pass through and options but
currently we don't have any options
being set for the marker cluster so
where we do have our map options being
set in a wrap options j/s file we can
set a property to set the cluster
options if we just pass through ops that
cluster we can then customize our
cluster and then when we also can do too
is we can check to see if we're using a
cluster in the first place if there's a
property for the cluster then we'll
initialize the cluster library if not
then we need to go down here to where
we're adding our markers and we need to
also check for it down here as well so
in this case we haven't set any options
for our marker clusterer yet so it's
going about it as it's not there
so to change that will go into map
options and then down here we'll set one
for cluster and then automatically we
can see that it's starting to cluster up
and if we want to set further options
for our cluster we can then create this
options object and within options we're
gonna want to set the styles and the
styles are an array of objects and the
reason why it's an array is because it's
set up for the different densities we
saw the clusters change color as we
zoomed higher up onto the map and
there's three types of densities that
we're going to be dealing with there's
small medium and large
so the first object represents the small
density the second object the medium
density and the third one the large
density and right now we're not seeing
any Styles because we're setting the
stylus to blank if we were to remove
them we see the small blue density
cluster so what we're going to do is
we're going to switch the small cluster
density from being blue to an orange so
the first property we're putting into
our style object is called URL and this
is similar to the icon property we deal
with with markers and I've just hot
linked over to a marker clusterer and
that's m2 and we're not seeing anything
and that's because we need to set a high
in a width and once we have a height and
a width set we can see that we have our
marker clusterer
and one thing we actually can do too is
change the text color and as ugly as it
is we were able to change it to a red
and we also can change the text size so
by providing this first object literal
we're able to set the styles for setting
the small density and if we provide
another object literal we'll set it for
the medium density so we'll paste the
object literal over and then if the URL
we'll change this to M one and we'll get
rid of the text color and the text size
for this one
so now we'll zoom out and we can see
when we get to our medium density that
our marker change to our blue and the
smaller densities still have the orange
color so it's pretty easy to go through
and set styles for our marker clusterer
but one thing we need to be aware of is
now that we're using a cluster we're
moving our markers is a bit different so
down at the bottom of our main script
file I'm going to remove the marker with
the ID of two and you can see that right
now we have multiple IDs of two and
anything that's the green rice marker
should actually be removed from our map
but currently that's not happening so
right now we can console dot log the
marker that we're passing through the
callback to make sure that we're
actually evaluating that and we can see
in the console that we have all these
markers that are the green rice markers
so to make sure we're evaluating
correctly we'll do an if statement
inside the remove by and if the marker
ID is equal to two then we'll console
dot log that marker and we can see here
in the console that we get all these
markers back so if we're getting these
markers why aren't they removing from
the map so we'll go into our map stir
library and we'll check our remove by
function we can see that we're calling
set map to null but now that we're using
a marker cluster we actually need to
call something different so first we
need to check to see if we're actually
using a marker cluster so if you don't
have a marker cluster we just want to
set the map to null but if we do have a
marker cluster we're gonna call another
function we're gonna call this stop
marker clusterer
when to call remove mark
and we're gonna pass through the marker
but in this case is not working and
that's because the value of the this
keyword so we'll set a variable self to
this and we'll change all of this
references to self so now that we're
checking for a map cluster we can see
that we don't get any of those green
rice markers onto the map so if you're
using a marker clusterer you have to
remove it from the cluster to get it off
the map and if you're not using it you
can just call the set map function and
set that to null so far we've been able
to add these functions onto this library
and then just call them in this main
script file and since we know this
library is made it's easy for us that's
happened to this API but we might want
to make it a bit easier for the everyday
user to use it and usually things like
that are written as jQuery plugins and
jQuery widgets so in the next lesson
we'll take this map library and we'll
implement a jQuery widget with it