Custom Interactive Maps with the Google Maps API 09 InfoBoxes Video Lecture | Customize Interactive Maps with Google Maps API for Website/App - App Development

so we've been able to add markers to our
map and customize them and also add
events onto these markers and in this
lesson we'll focus on adding info
windows when those markers are clicked
so in our plunker we can see that we're
adding this marker and we're just
providing the Latin along and a custom
icon and right now our add marker
function doesn't actually return
anything so if we go to our map stir and
then down here at the bottom of our add
marker function will return the marker
so back in our main script
we'll set a marker variable for it so
now that we have the marker variable
we'll add an info window on to the
marker so just like we've done for every
single component we've tapped into the
Google Maps namespace and new it up that
object and info windows are no different
so to create an info window well store
it in a variable and we'll call new
Google dot maps dot info window and just
like the previous components they'll
take in an object literal in this object
literal just needs one property called
contents and we'll set this content to I
like food and now that this info window
is created we need to open it up so we
can call a function for it we can say
info window dot open however it's not
opening up and that's because we need to
tell it where to open first we need to
set it to the map so we can say map G
map and then we see it in the top left
and the next parameter will tell us
where Center it to and in this case we
can just provide in the marker so now
you can see we have the info window
right over the marker however if you
want it to be opened when the marker is
clicked on you're going to have to set
up an event for that so instead of the
object literal for the add marker
function we could set the events and
within the callback if we create and
open the info window when we click on it
we can see that we get the info window
however if you want to add an info
window to every marker this can be a lot
of code to do so so we can take this
code and we can abstract it into our
library so rather than specifying an
events we can just provide a string for
the contents and ideally with this
content property all we'd have to do is
click on that marker and it'll open up
that info window
so we'll go into the maps turret library
and below we're checking for an events
we'll check to see if there's contents
and if there's content we'll set an
event for it so we're using the
underscore on function we're creating an
object we're setting the event name to
click and within the callback we're
setting the content of the info window
and then we're opening up to this dot G
map and then the marker so now if we
click on the marker we can see we have I
like food so in our main script file we
can go and we can create another marker
and if we set the content to another
string when we click on that we see we
have I like rice and if we click on the
other one it says I like food so we can
easily add infowindows just by
abstracting that logic into our master
library and now that we have these
content strings we can actually even add
a bit of HTML to customize them so we'll
wrap the first one in a div and then
we'll set a style attribute and we'll
set the color to a red so now when we
click on the marker we can see that we
get I like food but the color is in red
so we can use HTML and CSS to customize
the info windows so in this lesson we
were able to take the info window
content and abstract it into our map
stir library and within our Maps or
library we set a click event so every
time a marker is clicked on if it has a
Content string it'll open that up in an
info window so now that we're going to
be able to add multiple markers to the
map we're probably going to want to make
sure we can keep track of them and
surprisingly enough there's nothing
within Google Maps that natively keeps
track of your markers for you so in this
case if we are it's happened to the G
map we can't say mapped out G mapped out
markers so there's no native collection
of markers within Google Maps so if you
want to keep track of the markers on
your map you're going to have to do it
yourself so in the next lesson we'll
write our own construct that helps us
keep track of our markers