WEBVTT

00:00:06.930 --> 00:00:11.100
In this video we're going to learn how to add markers to our map.

00:00:11.100 --> 00:00:20.100
Also we learn how to add info windows containing some information that we can add about places and we

00:00:20.100 --> 00:00:24.180
will see how to create some animations for al-Maqdis.

00:00:24.360 --> 00:00:38.880
So let's open our FY FCP and create a new file and call it to those markers and inflowing knows those

00:00:38.880 --> 00:00:40.870
BHB.

00:00:40.980 --> 00:00:45.630
So let's open this file in brackets using control.

00:00:48.440 --> 00:00:49.400
OK.

00:00:49.900 --> 00:00:52.260
Are you going to copy the content from the previous file

00:00:56.510 --> 00:01:06.400
OK change the title to Marcuse and in through windows see that's.

00:01:06.530 --> 00:01:09.110
Let's open this page.

00:01:10.310 --> 00:01:14.410
OK let's go to our Web site and

00:01:19.290 --> 00:01:34.830
let's change this file to two dot markers and info in Windows those those BHB.

00:01:35.710 --> 00:01:38.720
OK so at the moment we can see them up there.

00:01:38.730 --> 00:01:41.830
Now let's add some markers to our map.

00:01:42.270 --> 00:01:51.370
So it creates the first marker which is this one is go at the end of our javascript's code honeycomb

00:01:51.380 --> 00:01:55.980
and the Create marker 1.

00:01:56.370 --> 00:02:06.150
So to create a marker we need to create an object so let's call it marker 1 and to create this object

00:02:06.150 --> 00:02:08.370
we need to use a constructor.

00:02:08.490 --> 00:02:12.690
So we're going to use the keyword new followed by the constructs his name.

00:02:13.230 --> 00:02:18.030
So it's Google those maps those Mark.

00:02:18.640 --> 00:02:19.370
OK.

00:02:19.590 --> 00:02:25.880
And deconstructs is going to take one prominent which refers to the options of our market.

00:02:26.040 --> 00:02:31.880
So let's call these options Marka one options.

00:02:31.890 --> 00:02:37.690
So that's going to be a variable which we will define before creating the market.

00:02:38.360 --> 00:02:40.740
OK.

00:02:41.980 --> 00:02:45.810
So variable mark on options.

00:02:45.840 --> 00:02:55.010
So this is going to be an object and it's going to include a few promp promises all options for properties

00:02:55.080 --> 00:02:55.750
.

00:02:55.890 --> 00:03:01.260
So the first property is going to be the position of the market.

00:03:02.480 --> 00:03:07.070
And I said the position the same way we have said the center of our map earlier.

00:03:07.290 --> 00:03:08.760
Okay.

00:03:09.360 --> 00:03:11.870
Using the My Lai as you'd like to add variable

00:03:15.230 --> 00:03:21.080
and I Sabbats we need to specify which map we are going to place our mark on.

00:03:21.540 --> 00:03:28.590
So the property is called Map and in our case we're going to use the map objects as we defined earlier

00:03:28.600 --> 00:03:29.230
.

00:03:29.850 --> 00:03:30.660
Okay.

00:03:30.660 --> 00:03:35.110
So when the right map does make sure as you differentiate between these two.

00:03:35.130 --> 00:03:38.130
The first one is the name of the property of the marker.

00:03:38.490 --> 00:03:42.790
The second one is the object map as we defined earlier.

00:03:42.800 --> 00:03:44.450
We could have named does anything.

00:03:44.760 --> 00:03:52.320
Ok my map or whatever and in that case I would have base it up there.

00:03:52.830 --> 00:03:59.420
OK so I'm going to go back to this and save.

00:03:59.490 --> 00:04:02.200
No it is check.

00:04:03.720 --> 00:04:06.250
So it goes Oh my God.

00:04:06.420 --> 00:04:06.950
OK.

00:04:07.170 --> 00:04:09.840
Now these are a few properties.

00:04:11.220 --> 00:04:18.900
Let's give our marker a title so that when we have it on this we see a tooltip.

00:04:20.190 --> 00:04:26.260
So it's going to be a string for example this is love.

00:04:26.840 --> 00:04:27.240
OK.

00:04:27.300 --> 00:04:35.070
Now if I save and refresh the page if I hover on the market then it can see HLT there.

00:04:35.150 --> 00:04:35.840
This is on.

00:04:36.060 --> 00:04:36.810
OK.

00:04:37.290 --> 00:04:42.210
We can also make the matka draggle by setting the drug bill property

00:04:47.150 --> 00:04:49.800
to True.

00:04:51.540 --> 00:04:53.510
OK.

00:04:54.460 --> 00:04:55.310
We refresh

00:04:59.990 --> 00:05:03.460
you can try Comac.

00:05:03.770 --> 00:05:12.980
Also we can add animation to our market so the property is animation.

00:05:13.810 --> 00:05:14.730
OK.

00:05:15.330 --> 00:05:24.390
And let's say that's when you know the page we want oh market to drop pay just like that.

00:05:25.680 --> 00:05:26.610
OK.

00:05:26.930 --> 00:05:33.790
So the value of the animation is going to be Google Maps.

00:05:34.010 --> 00:05:38.860
That's animation copyable a drop capital letters.

00:05:39.250 --> 00:05:39.710
OK.

00:05:39.900 --> 00:05:42.730
That is for the animation.

00:05:43.250 --> 00:05:51.160
So let's save this refresh our page and you can see the drop animation.

00:05:52.000 --> 00:05:52.930
OK.

00:05:53.660 --> 00:05:59.230
Nounless creates the second matka which corresponds to that one.

00:06:00.160 --> 00:06:01.450
OK.

00:06:01.660 --> 00:06:04.350
And I sense that in Bedford that's where I live.

00:06:04.610 --> 00:06:04.970
So

00:06:09.970 --> 00:06:14.730
it's place a common marker too.

00:06:15.140 --> 00:06:22.490
So we're going to create a variable marker too and we get to use the same syntax we used earlier to

00:06:22.500 --> 00:06:27.390
use the constructs like Google Plus maps those marker. OK with the keyword new.

00:06:27.770 --> 00:06:33.260
And we're going to place the options of the Mokka inside the promises of the function.

00:06:33.380 --> 00:06:40.070
So just to save time I'm going to copy paste thoughts and rather matka one options is going to be matka

00:06:40.250 --> 00:06:41.250
two options.

00:06:41.510 --> 00:06:44.140
So let's define the options at the beginning.

00:06:44.900 --> 00:06:45.230
So

00:06:53.570 --> 00:07:09.790
this time let's define the position OK and for Bedford's the lassitude is fifty two point 1 3 3 7.

00:07:09.890 --> 00:07:18.710
The limited is minus zero points 4 5 7 7.

00:07:19.670 --> 00:07:23.340
OK.

00:07:24.050 --> 00:07:30.920
And then the second property is going to be the title.

00:07:30.990 --> 00:07:35.630
They say this is Betford.

00:07:37.990 --> 00:07:39.070
OK.

00:07:40.130 --> 00:07:48.170
Now I'm not going to use the map property but instead I'm going to go after the creation of the marker

00:07:48.800 --> 00:07:54.970
using the constructor and then I'm going to use a method of the Marcuse object.

00:07:55.070 --> 00:08:04.300
So we're going to use the market objects and we're going to use a method called set up with capitals

00:08:04.390 --> 00:08:04.850
.

00:08:05.510 --> 00:08:12.750
So this method is going to take as a barometer the map objects where we want to place our mark.

00:08:12.970 --> 00:08:13.360
OK.

00:08:13.500 --> 00:08:15.100
In our case it's a map.

00:08:15.200 --> 00:08:22.900
So let's save this and refresh the page.

00:08:23.150 --> 00:08:27.160
Now we can see our marker that way.

00:08:27.350 --> 00:08:33.760
Now if you want to add some animation to the Mokka outside the options we can do that.

00:08:34.160 --> 00:08:40.680
So let's do it before setting them up.

00:08:42.380 --> 00:08:44.140
So there is a method for that.

00:08:44.150 --> 00:08:46.670
It's sets animation.

00:08:47.880 --> 00:08:48.530
OK.

00:08:48.800 --> 00:08:54.450
And we're going to place the animation value inside the promises

00:08:54.460 --> 00:09:00.170
.

00:09:02.510 --> 00:09:12.060
So rather than drop let's go this time for bounce and save and refresh.

00:09:12.360 --> 00:09:15.080
Now we can see us oh my god is bouncing.

00:09:15.530 --> 00:09:17.110
OK.

00:09:18.200 --> 00:09:21.250
Now let's add a an info window.

00:09:22.040 --> 00:09:22.340
OK.

00:09:22.350 --> 00:09:27.670
And make sure that once we click on Mach 1 we can see the info window.

00:09:28.320 --> 00:09:30.050
So you create an infinite window.

00:09:30.170 --> 00:09:32.020
We are going to create an object.

00:09:32.180 --> 00:09:36.180
So it is do that right after the creation of my own.

00:09:37.550 --> 00:09:43.930
So let's call this object info window.

00:09:44.440 --> 00:09:47.670
So you need a constructor to create this object.

00:09:47.690 --> 00:09:53.290
So are going to use the keyword new followed by the constructors name which is Google those maps dot

00:09:54.120 --> 00:09:57.040
info window.

00:09:57.260 --> 00:10:01.910
So this structure is going to take as a promise said the options of the info window.

00:10:02.200 --> 00:10:09.680
OK so we can either create a variable for the options of the info window and place it there.

00:10:09.730 --> 00:10:14.440
Otherwise we can just go ahead and do this directly.

00:10:14.990 --> 00:10:18.380
So that's going to be an object.

00:10:18.500 --> 00:10:18.840
OK.

00:10:18.850 --> 00:10:25.550
I mean a place a few properties inside they're going to start with the contents of the info window which

00:10:25.540 --> 00:10:32.880
are going to switch to a variable content strings which I'm going to define there.

00:10:33.410 --> 00:10:38.950
OK.

00:10:40.940 --> 00:10:47.810
And inside these variable we're going to play some ASML code inside the quotes.

00:10:47.820 --> 00:10:57.470
So let's define a div and let's write some checks inside for example.

00:10:57.570 --> 00:11:02.930
This is in-fill window.

00:11:04.330 --> 00:11:14.510
OK now the next barometer or the next property of to go for let's define a maximum with for our info

00:11:14.510 --> 00:11:15.240
window.

00:11:15.890 --> 00:11:19.890
So the property is Max with.

00:11:20.930 --> 00:11:28.540
And they say that's 100 pixels OK.

00:11:30.690 --> 00:11:32.160
This is a common.

00:11:32.850 --> 00:11:37.400
Create info window.

00:11:38.520 --> 00:11:45.770
OK now we want to be able to click on the marker and show the info window.

00:11:45.770 --> 00:11:48.500
So we're going to do we're going to add a listener

00:11:51.800 --> 00:11:59.620
OK to the matka so that it shows the info window.

00:12:04.500 --> 00:12:12.560
So that we're going to use the marker object which is marked one and they're going to use a method called

00:12:12.870 --> 00:12:15.300
Odd listener.

00:12:16.700 --> 00:12:22.020
So inside this method we can have a couple of problems.

00:12:22.010 --> 00:12:32.150
So the first problem is the event which is click OK and the second Brahmas is the function to execute

00:12:33.820 --> 00:12:39.990
when the event takes place so we can define a function.

00:12:43.010 --> 00:12:43.800
Ok

00:12:49.280 --> 00:12:56.880
so to show the info window we can use the info window object.

00:12:57.920 --> 00:13:05.270
OK then a method opened and get to place to promises that.

00:13:05.380 --> 00:13:19.190
So the first promiser is the map object which is map the second barometer is the Mokka gate which is

00:13:19.190 --> 00:13:27.360
Marka one visits to Mark to then once we click on Mach 1 the info window will show in-market too.

00:13:27.570 --> 00:13:33.260
OK so no need save this and make sure it's working.

00:13:33.290 --> 00:13:36.460
That's a semi-colon like that.

00:13:36.580 --> 00:13:39.050
OK so if I refresh the page

00:13:41.850 --> 00:13:46.520
and click on Mark One neighbor can see our info window.

00:13:47.080 --> 00:13:47.320
OK

00:13:51.080 --> 00:13:57.020
in the next video we are going to learn how to show hide or completely delete.

00:13:57.050 --> 00:13:57.590
Markus