We're going to talk a little bit about the Interactive Resume Project.
You were told how to make the map here.
Essentially, you had to add this line
to your resume.js file to make the resume show up.
And you also have to uncomment a bunch of lines in your helper.js.
So, essentially, all the lines here, you have to uncomment those lines.
And if you did this, the map on your resume showed up via magic, or not.
We're going to talk a little bit about how this actually happens.
What the code for showing your resume is like.
And essentially most of the code is in the helper.js file,
the file that you downloaded.
And, there's one main function that makes all of this happen,
it's called initializeMap.
And this function is essentially called when your page loads,
initializeMap is called, essentially, once you uncomment this quote over here.
This is exactly what happens, right let's close it.
And in fact, I have actually uncommented it in here so you can see,
in here, initializeMap is called on load.
Yeah, this line over here, one of the lines that you had to uncomment.
Roughly, what happens when this function is called is that, the script
collects all the locations from the objects that you have in your resume.
So this happens in a helper function that's called locationFinder.
Essentially, what this function does is it looks over your work, and
your places where you're working, and your education, and your bio object.
And it collects all the location data from from those data objects,
and then it uses a Google Play search service to translate
those three addresses into longitude and latitude and
then places that as pins on the map.
So we can just go upwards to this function.
Because really, inside this function, inside initializeMap,
that's where everything happens.
And so essentially we define several helper functions inside this
function and then call them in order to collect the information and
to present it as pins on the map.
So the first interesting line that we have here is this line over here.
So, map = new google.maps.Map(document...).
And so, what happens is that in here we create a new map object and
we are passing two arguments to fit this map.
This argument over here, the document.querySelector('#map'),
that's just a division inside your index.html file that the map
should attach to that, that's where the map should be displayed.
And the map options is something that we define over here.
And it just tells Google Maps which type of map we want to use and
how we want to display it.
And we can actually go to see the documentation.
So this is just in general Google Maps web page,
and then has a lot of information.
And here you can see about different map types that it has.
And now there's an example.
In here for example, there is an example code of how to create a new map.
So as you can see we're calling new google.maps.Map and
then attaching it to a certain element in our index.html file, and
then giving it the map options.
All right, so, we're just creating our new map here, but
we're not doing anything with it.
Now first we need to collect all the locations from our resume.
And this happens in this function over here, locationFinder.
So what this does is, it's a really, actually very simple function so
there's nothing over here, actually, that you haven't seen.
Basically, we create an empty array and
then we enter the locations from the contacts in here as the first item and
we look over to education section and the work section.
And each location that we find we enter it in and those locations are going to
be, probably, street addresses or some sort of a string.
And we would essentially want to translate those locations
into longitude and latitude into the relevant objects so
that we can push them, so that we can make them into pins into the map.
And so this, as you can see over here.
So at the end, we call locations = locationFinder, right?
So, this is all happening inside initializeMap.
So we create this new locations, all right, it has all of our locations.
And then we call pinPoster when these locations are ready.
So let's go and see what pinPoster does.
So what pinPoster does, it actually uses an additional service,
the PlacesService,
which is not strictly a part of Google Maps but it is a related service.
It's a service that you can use with Google Maps.
And so essentially this is the service that's going to translate those
locations into objects that we can add into the map.
The first step that we need to do, to do that,
would be to create this service, initiate this service.
So this happens in this line over here.
If we want to see how the information on the Places Library, here it is.
And so this essentially enables the application to search for
places and this is to make it work in addition to what I've shown you.
You have to add this line over here in your index.html file.
And in fact, if you remember in the instructions,
you were told to uncomment one line in your index.html file.
And this is the line that you were told to uncomment.
So essentially, this is the line that loads this additional library.
So as you can see, there are several different types of searches that you can
perform using this library.
You can do a nearby search, a text search, and a bunch of other things.
The search that we are using in our helper.js, is a text search.
So this is a search that essentially presents a list of nearby places based
on a string.
And this is exactly what we needed because in our resumeBuilder.js,
we represented the different locations, different schools, and different
places that you work as string, so this is the appropriate thing to use.
And so here's a little more information of what you need.
The different type of things that you need to provide
in order to make your request work.
But essentially, the basic things that you need is,
you need your request and you need a callback function.
So, basically to do a search, you will run the service.textSearch, and
then you'll need to give it your parameters.
Requesting callback, the request can contain a lot of things but
the basic thing that it has to contain, would be a query.
And the query item is just supposed to be the string of the location that
you're going to be searching for.
So as you can see here, we have a for loop will look up all our locations that we
collected before and make a new request for each one of those.
And with that locations string, and then with this callback function.
Now the callback function is essentially the function is going to handle
whatever textSearch returns.
So you need to put that function as an input to textSearch.
And so we have actually defined this callback function over here.
So this is a function that takes two arguments, results and status.
Both arguments are returned by textSearch.
Status just tells you whether the service was able to return
something meaningful.
And then what results contains is an array of,
essentially, longitude and latitudes.
Why an array, because sometimes there is more than one match.
But we're going to use the first one.
Essentially what this line over here does is, it tests whether
the status which was returned was OK, whether we got a valid result.
And if so, it calls another function that we have defined here,
createMapMarker, with the first item of this array.
And so essentially, createMapMarker takes my location that was returned from
our textSearch and it converts it into a pin on the map.
So let's go look at createMarker.
All right, so this is our createMapMarker function and
it takes this argument placeData.
And so essentially, as you can sort of guess how the placeData object looks
like, because we can access the latitude and the longitude, and
it also has a formatted address.
So we can get all this from our placeData, and
then, what we do is we create a new Google Maps marker.
So the markers are something that Google Maps provides.
So we can go again and look into our Markers section.
So here we have a little bit about markers, so essentially,
very straightforward.
A marker defines a location on the map.
And there's a lot that you can do in terms of changing how
the marker appears.
So you can change the icon that you're going to see.
It has a default icon, but you can change that.
You can attach an info window to it to display additional information,
and you were actually asked to do this in one of the exercises in
the JavaScript Basics class.
There's a lot you can do.
But essentially, so this is how you make a new marker,
essentially call new google.maps.Marker.
It has a position, it has the map that it needs to attach to, and
the text that's going to be part of the marker property.
So, as you can see, here we add this marker using our map.
This is the location that we're taking from placeData.
And the title is just essentially the formatted address that
placeData returned.
And as you can see over here, we are also attaching an info window, we're
creating a new info window and that is going to open when you click a marker.
We can see a little bit about info windows as well.
>> Yes, so let's take a step back at [INAUDIBLE] because
there's been a lot of stuff that we're talking about.
So basically, what I'm asking,
when you were trying to figure this out yourself, your process was you
were just stepping through each function one at a time, right?
>> Right, yes.
>> Right, so basically, if you think about what Dimka did, guys, just if you
take a step back, she's already, just through her experience, she's
already had a mental map, a strategy, a framework of how to look things up.
And that's actually one of the key things that I like to point out,
that this is how you will develop your strength as a developer.
because most of the time, most developers,
they don't know all of the function calls.
>> And sometimes you have to work with pieces of code that you were given
on previous projects or things that somebody worked on.
And you're going to have to figure out what they did.
If they're nice,
there are going to have some comments that are going to be helpful.
Sometimes, you're not going to have comments or
you're going to have comments that are less helpful.
So you're going to have to figure out stuff.
>> Yeah, so that's the thing,
this is a common strategy that a lot of developers use.
And I personally use this, too.
Basically, I stepped into code, as soon as I look at
things piece-wise, function-wise, a couple of lines at a time,
and make sure that I'm stepping through, I'm understanding the logic and
the flow of how this person did it.
And then if I recognize a code that I really want to dive deep into,
I need to then go in and do a search.
I look at the API documentation and usually if it's a popular library,
such as Google and Google Maps, there will be a ton of documentation.
And there will be a ton of discussions of people trying to figure out what
does this documentation mean, how do you do it, how does this work?
You can then do a lot of research and piece together how things get done.
>> And Google Maps, they have really good documentation, in that they also
have examples of how to use things, or how like to build these things.
So it's really helpful, for example,
if you're trying to build something from Scratch, it's really helpful.
And if you're just trying to figure out why this piece of code works,
then you can look at the different objects that are created that are used,
and read up on those.
And see, okay, that's why they're calling this with this as an argument
and that's why they have this as a callback function, okay, now I got it.
>> Right, yeah.
So again, this is really not magic,
it's just really knowing how to approach things, right?
>> [CROSSTALK] It's doing a little bit of research.
If it's something that's routine, you've done this before,
you've used this before, then probably less.
And if you just want to understand, like a piece of code that
somebody gave you, that works, and this happens a lot.
Like for example, you're going to be searching on say, stack overflow,
how to do something, and you're going to find this piece of code that somebody
posted and said, hey if you want to do this then use this piece of code.
And you just copy and paste it and it's going to work.
But it's always a good idea to kind of take the time to understand
why it works, as well.
I mean obviously the goal was to make it work, so now you made it work.
But I think the greater goal would be to understand why it works, so
that next time you can code it yourself.
>> That's actually really good to know, Alice, thank you.
Info window.
>> Yeah, and info window was something that you were actually asked to
investigate a little bit in one of the quizzes.
>> Can you maximize your- >> Okay, yeah.
And so essentially, the way it works with Windows is that you add a pop
up window to this marker that's going to show up and can display more info.
And then essentially, I'm actually going to minimize this back so that I can show
you guys the documentation on Info Windows, over here.
Right, so you can see essentially what a Info Window is, really space for text or
for an image, and a pop up window about the map that will give them location.
So basically it just like a little window.
To add a window to open with an info window you essentially need
to make a new one by calling new google.maps.InfoWindow and with contentString.
And then you need to attach it to your marker.
So essentially,
over here we see how to attach it to a marker using a click listener.
So essentially, what this happens is, that there's a listener that listens for
whenever the marker is clicked, this info window is opened.
So this is essentially how you add an info window.
And this can also help you with the solution to the quiz.
>> That's great, thank you. Thanks for showing us that walk through
for just understanding how Google Maps works in the interactive resume.
We hope this will be useful for you, because in, guess what, project five,
you will have to implement your own Google Maps from scratch.
From at the very beginning.
>> So you're going to have to be looking at that documentation a lot more.
>> So It's good to maybe thinking about how things work behind the scenes.
So it's going to help you later on in your project five,
because then project five is your neighborhood map project.
And this is actually the project that we do not give you any code for.
>> You're on your own.
You're basically starting with a blank page, a blank slate.
So, for you people who are at this
stage on project two, don't worry we'll build you up.
So don't be scared.
We're not trying to intimidate you or
anything, we just want to let you know to paint
a nice picture of what's going to happen and hopefully set good expectations.
So you'll be led and you won't get surprised.