1
00:00:00,000 --> 00:00:00,690


2
00:00:00,690 --> 00:00:04,290
ZAMYLA CHAN: Now let's move from the
Python back end to the JavaScript front

3
00:00:04,290 --> 00:00:05,100
end.

4
00:00:05,100 --> 00:00:09,810
In scripts.js Jay yes there's just
a small to-do for us in configure.

5
00:00:09,810 --> 00:00:13,290
Within the suggestion you'll
see that we concatenate

6
00:00:13,290 --> 00:00:16,530
HTML to put within the
search bar, as users

7
00:00:16,530 --> 00:00:19,170
search they'll see suggestions pop up.

8
00:00:19,170 --> 00:00:23,490
So up to us to modify suggestions so
that it displays matches to whatever

9
00:00:23,490 --> 00:00:25,800
place the user might be searching up.

10
00:00:25,800 --> 00:00:28,680
So once we've done that,
let's move on to addMarker.

11
00:00:28,680 --> 00:00:30,690
Within addMarker, we'll
want to instantiate

12
00:00:30,690 --> 00:00:35,040
a marker for every place in the US map,
or whichever country you've chosen.

13
00:00:35,040 --> 00:00:38,130
We want to listen for clicks on
those markers within the map,

14
00:00:38,130 --> 00:00:43,020
and then once clicks are received, get
articles for that particular place,

15
00:00:43,020 --> 00:00:46,140
building a list of
links to those articles.

16
00:00:46,140 --> 00:00:49,740
And we want to be able to remember
these markers so that later on we

17
00:00:49,740 --> 00:00:51,330
can remove them.

18
00:00:51,330 --> 00:00:55,290
Within all of these many to-dos for
addMarker, I'll give you some hints

19
00:00:55,290 --> 00:00:59,400
or rather point you towards functions
that you might want to look into.

20
00:00:59,400 --> 00:01:03,180
But again, the crux of this problem
isn't writing a lot of code,

21
00:01:03,180 --> 00:01:08,320
but rather understanding how to
look up, within an API for instance,

22
00:01:08,320 --> 00:01:12,000
the function that you'll need in order
to achieve the functionality that you

23
00:01:12,000 --> 00:01:12,930
want.

24
00:01:12,930 --> 00:01:17,130
So, to instantiate the marker,
look into google.maps.Marker.

25
00:01:17,130 --> 00:01:18,420
That's my only hint.

26
00:01:18,420 --> 00:01:23,100
To listen for clicks on the marker,
look into event.addListener.

27
00:01:23,100 --> 00:01:27,900
To get articles for a certain place,
look into getting the JSON file

28
00:01:27,900 --> 00:01:31,230
and remember how you
retrieved it before.

29
00:01:31,230 --> 00:01:35,770
Finally, within addMarker you'll want
to remember each of those markers.

30
00:01:35,770 --> 00:01:40,560
Remember that markers is a global
variable at the top of scripts.js,

31
00:01:40,560 --> 00:01:43,260
so you'll want to find
some way of representing

32
00:01:43,260 --> 00:01:47,970
this whole list of markers, whether
it be an array or an object, what

33
00:01:47,970 --> 00:01:51,810
have you, as long as you're
able to remove them later on.

34
00:01:51,810 --> 00:01:56,250
Because within removeMarker we'll want
to iterate over this marker variable

35
00:01:56,250 --> 00:01:59,550
and remove all of them from
the map and delete them.

36
00:01:59,550 --> 00:02:04,050
Again look into the Google Maps API for
a function on how to remove and delete

37
00:02:04,050 --> 00:02:05,760
these markers.

38
00:02:05,760 --> 00:02:08,160
With that, you've completed
all of the code that's

39
00:02:08,160 --> 00:02:10,680
required of you for this problem.

40
00:02:10,680 --> 00:02:13,830
Last thing for you to do is to
try and break your own website.

41
00:02:13,830 --> 00:02:18,300
There is no check 50, So it's up to you
to compare against the staff solution,

42
00:02:18,300 --> 00:02:21,960
try and come up with corner cases
that you haven't accounted for yet.

43
00:02:21,960 --> 00:02:26,010
Once you finish that, then you've
completed your very first and pretty

44
00:02:26,010 --> 00:02:28,080
cool web app.

45
00:02:28,080 --> 00:02:32,430
My name is Zamyla, and this was Mashup.

46
00:02:32,430 --> 00:02:34,969