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

so now that we know how to build a basic
map up let's look to see how we can
customize it using map options so this
is the first map we created and we
created an options object that we then
put into the map constructor and that
helps set up our map it contain
properties such as the center and the
zoom and there's other properties we can
set as well one of the things a lot of
people don't like seeing on their map is
this zoom control and by setting the
disabled default UI property to true we
no longer see those options there
another thing that annoys some people is
when they're scrolling through a website
and then there's a map placed in the
middle of the page and as they're
scrolling they'll start zooming in or
zooming out on the map so to fix this we
can pass you another property called
scroll wheel and set that to false so
now when we try to scroll we're not
going anywhere and if you want to
reverse it you just need to set it to
true or you can even omit it another
thing you can do is you can drag the map
around and this can be canceled out with
a draggable property so it's drivable
set the false we can't move this map
around another property people like to
change is the map type so we can set a
value for the property map type ID and
we can set that to Google dot Maps
dot map type ID and then we can set it
to hybrid and you can see that's a
mixture between the road map and the
satellite we could do the same thing by
setting it to a satellite and now we see
that we don't see any of the markings
for the map and we want to get it back
to a road map we just type in Road map
you also can control at what length the
user can zoom in on the page so
currently we're at a zoom level of 10
but if we set the maximum to level of 11
we can scroll down one but then from
here we can't scroll any more we can do
something similar at the men's oome and
if we set that to 9 so we can see we can
scroll down and we go from 10 to 11 then
we scroll out we can only go to a
minimum zoom of 9 so this allows us to
control at what levels the user can zoom
in and out on this map so right now we
have the default UI disabled but if we
set this to false we
see the controls again and from here we
can actually control the position of
these controls on the page so by setting
zoom control options we can set an
object literal with that that will help
tell us where we want it on the page so
one of the properties for this is the
position and this is in the Google maps
that control position namespace and then
we can say we want it in the bottom
underscore the left now we can see in
the bottom left we have our map controls
and we even can set the style so in the
Google maps that assume control style we
can set it to small now you can see that
we have a small version and if we go
back to default we see we get the larger
version so our zoom controls are down at
the bottom left
but our pane controls are still at the
top so we can set a property to move
those down to the bottom as well so just
like above and set a zoom control
options will do pain control options and
will set an object literal and then
we'll also set a position and we'll go
into the same Google Maps that control
position namespace and now we have this
into the bottom left but we even can
change this to the left bottom and it
moves it over just a little bit more in
these directions and places are
interchangeable so you can change this
to top left and it goes back to the top
left or we can even say top underscore
right but for now we'll keep it to the
left bottom so these are just a couple
of the ways you can customize your map
with map options and some of you might
find this to be a pretty clunky process
that you have to provide this whole
nested object literal and if you want to
be a bit more modular you can actually
abstract this object literal out into
its own namespace so we can create a new
file and we can call it map options and
we'll create a self invoking anonymous
function we'll pass through the window
and then we'll also pass through window
dot map ster and map series just the
name space that we're going to be using
to create a library in this video so we
can use map stir inside of the cell
phone voguing anonymous function however
there can be an issue with this window
dot map store down here and the problem
is that there could be a
object so we can do an or check and if
this window dot map stir doesn't exist
we can set it to an empty object literal
so this way instead of our self invoking
anonymous function we're guaranteed to
be working with an object when we're
using map stir so inside of here we can
actually set our map options so we'll
set it to this object up here and now
this is the same map options that we're
using on the other page so if we go back
to our index and we include this and
then we'll go back into our map options
and one thing we don't want to forget to
do is import the Google namespace since
we're using it inside of the self
invoking anonymous function so now that
Google is included we'll go back into
our script j/s and just like we've done
previously we can import window map stir
and do an old check for it as well so
now rather than setting up these options
and this big object literal we can go to
map stir and we can do map stir dot map
underscore options and when we replace
it with that we can see that our map
gets initialized with the same options
so now rather than having that big
object literal and our main script file
we've moved it out into a smaller file
and any where we need to initialize a
map with those options we can just call
maps or map underscore options and now
that code is reusable one thing you'll
notice when you're using Google Maps is
that Google Maps is like a bunch of
little LEGO pieces you can build all
sorts of things out of these LEGO pieces
however if you want them to do specific
things you're going to have to build
those pieces over and over again so
rather than building these small pieces
every single time we need them it would
be smarter for us to create a custom
library for us to use so in the next
lesson we're going to build upon our map
stir library and we're going to create
more methods that help us customize our
google map