Custom Interactive Maps with the Google Maps API 05 Map Utilities Video Lecture | Customize Interactive Maps with Google Maps API for Website/App - App Development

so we now know how to set up a map and
to customize its options as well and we
even took some of that code and we
started creating our own library to have
that code reused for multiple Maps so in
this lesson we're going to go through
and we're going to create the skeleton
for our map library so here in plunker
let's create a new file and we'll call
it Maps 3gs and inside of here we'll
create a self invoking anonymous
function and we're going to pass through
window in Google and then we're going to
create a variable called map stir and
we're going to set this variable to the
self invoking anonymous function and
inside of the self invoking anonymous
function we're going to create a
constructor function that's also called
map stir and then down here we're going
to return map stir so this may look a
little confusing to you but don't worry
if you're familiar with object-oriented
programming this is similar to creating
a class this whole block of code here is
called a module within here we can tack
on all of our functions and contain them
all within this module so this map stir
variable isn't actually storing an
object it's restoring the result of this
self invoking as function which is this
constructor function so this maps our
variable
stores a function not an object so
outside of the module we can tack on a
function to the module rather than
tacking on to the constructor function
and we can call it map stir creates and
then we can return a new map stir this
is essentially a factory function
because it returns an instance of the
object so whenever we call map stir
create will create a new object
so within map stir what we want to do is
we want to create a map so we want to
pass them in elements as well as options
and then we'll create a property and
we'll call it G map because that'll
stand for the Google map and we'll
return a new Google Maps dot map and
we'll pass through an element and the
options and then below here we also can
set the prototype so any functions that
we want to talk on to all instances of
all the objects will put onto the
prototype right now let's just make sure
we can create a
map stir object so we'll make sure to
pass through the element and the options
down here as well and down at the bottom
we need to say window dot map stir
equals map stir so now map stir is
attached to the window so an index dot
HTML or source our script file and now
in our main script file rather than
saying new Google Maps dot map we can
say map stir create and you can see that
we get the same result so if we wanted
to create multiple maps we can do it all
in this map store create and then right
now this is really the same thing as
creating a new Google map with the
Google Maps library but within our map
stir library this is we're going to be
able to tack on more functions to
encapsulate the functionality that we
commonly use so one thing that people
commonly do is that they get and set the
zoom level if we go into the Google Maps
API we can see that we have a get zoom
function and down at the bottom we have
a set zoom function so in our map
options will move our min and Max zoom
limits and within our main script file
we can say mapped on G map because
that's our map property and we can call
set zoom and we'll set it to 18 and you
can see the we have a deep zoom and then
we can do an alert and we also can call
map G map and we can call get zoom and
now you can see we have an alert box for
18 and some consider it bad practice to
tap into an object to then call its
method so we'll get rid of this and
we'll go into map stir and we can create
a function and we can call it zoom and
zoom will take in a level and we can
check to see if the level exists we'll
set the zoom however if the zoom does
not exist then we'll return the zoom so
now we'll go back to our script and
within here we can call map dot zoom and
we can set it to 18 and we can see that
we're zoomed in at 18 and now we can say
alert and we call map zoom but we're
just going to call the function and we
can see that it returns 18 so this
essentially acts as a getter and a
setter for the zoom property so if you
look into the Google Maps API you can
see that there's a lot of functions on
the map class so you can create
a function within the library that calls
in to all these or you can call in to
the map function to call these now can
get annoying calling it to dodgy map all
the time so I only create those
functions within the map store object
that I use most often so if you're
finding yourself calling the get zoom
and the set zoom more often I'd
recommend creating a method for it
within the library so in this lesson we
went through and we created the
scaffolding for our master library if we
go into script j/s we can actually
remove the Google dependency from our
self invoking anonymous function and we
can see that everything still works just
as it did before and this is because all
of the Google functionality is within
our Maps or library if we wanted to
switch to another mapping API we could
do that within our Maps or library and
our main script file wouldn't notice a
difference because here is where we're
doing all of the heavy work inside of
this library so in the next lesson we'll
learn how to trigger events from the map
and we'll also abstract that into our
mapping library as well