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

so now that we have our account set up
and everything let's go about creating a
real Google map in the browser in this
video series I'm going to be using
plunker and this is just an in-browser
code editor so in my new plunker project
we'll start setting up a Google map you
can see in plunker that we have our
files here to the left and then this is
our editor here in the browser and when
we click over here we can actually see a
live preview of what we're coding in
this pane to the left so to get going
the first thing we need to do is include
the Google Maps script reference and now
that we have the script reference up we
can just reference the script j/s file
that we have included in our plunker so
open up script j/s and the first thing
we're going to do is do a self invoking
anonymous function and for those of you
who aren't familiar with self invoking
anonymous functions this is just a way
to control scope in your project
everything you've done inside this
anonymous function will be contained
inside of this scope and another benefit
of self invoking anonymous functions is
that we can import other libraries into
our anonymous function so in this case
we can import the window so passing
through the window as a parameter you
can make sure to pass it through up here
as well and then we're also going to
pass through the Google namespace and
this is the equivalent of accessing
window Google because Google is now
attached to the window since we included
the Google Maps script reference so you
can say window Google or you can just
say Google but up here you can just
provide Google you could really provide
anything you want you could provide goog
and that would work as well because this
is just a parameter but for
consistency's sake we'll call it Google
so now that we have this set up we can
start building up our map and to build
up our map we need two things we need
map options and then the actual map
itself and the map options just an
object literal will be going deeper into
map options in a later lesson but for
now we just need to know a couple of
things so we have this object literal
created and we need to know the center
and then we also need to know the zoom
so the center option will just simply
set the center of where our map is
loaded so this will take in another
object literal and then this has two
properties a lat and a long and this
is the latitude and longitude that we
will be loading the center from so these
are the values that I choose to use you
can hard code read over values you want
to use this will just load up the area
for San Francisco and then down here at
the zoom level this is the actual zoom
of the map we can provide ten and this
will be a little closer up of a zoom
level and then below the map options
will create our map and this is where
the Google name space comes into play
this is where we can say new Google Maps
dot map and this is a constructor so we
need to pass two parameters into this
constructor we need an element and then
we also need the options that we
declared above currently we don't have
an element so right here we can create
our element I'm just using JavaScript we
can say document dot get element by ID
and we'll get an element called map -
canvas we haven't created this map
canvas on our HTML yet but we will in
just a second
so we've created map options we've set
the center in the zoom level we've
created an element that our map will
load inside of and then we also created
the map from the Google Maps library and
that's hook in the elements and then the
options as well so if we go back to
index dot HTML we can create our map so
right here okay it a div and give that
an ID of map canvas and right now we're
not seeing anything for our map and
that's because our map canvas doesn't
actually have any size to it so we need
to set some styles for it so we can open
up style dot CSS and then within here
we'll start setting styles I want the
map to take up a hundred percent height
and width on the page so I'm gonna set
the height of the HTML to 100% and then
for the body also set the height to 100%
and then I'll control any of the padding
as well so the padding and margin to
zero and then we'll set the size format
canvas and this is what's at the height
to 100% and you can see that our map
loaded up so this is really all it took
they load up a full screen map so one
thing to take note of is the order that
we're loading the scripts we have our
Google Maps script right here and then
our own script that loads this map and
we have this map canvas above it if we
were to put this in the head it went it
load properly and the reason why that is
is just simply the way up
browser interprets HTML it's gonna load
these scripts right here before it has
any idea what this map canvasses because
a browser just goes line by line so it's
gonna hit this and it has no idea what
Matt canvases so there's two ways to fix
this you either load the scripts the way
we were doing it previously or you can
have a function that doesn't call this
script file until the entire documents
been loaded this is something that
people do all the time in jQuery so
instead of calling a function that lets
us know the Dom has been loaded we're
just going to do this below our Dom
elements so setting up your Google map
is a pretty easy process you just need
to be aware of a couple of the pitfalls
and that's script loading like we just
talked about and then also your Styles
you need to make sure you're setting the
size for the map element that you're
initializing and then in the JavaScript
all we have to do is set options grab
the elements and then construct it with
Google Maps map so that's the easy way
to go about creating Google Maps in the
next lesson we're going to go further in
detail about the map options and map
options control some of the settings of
the way the map is loaded onto the page