Transcripts
1. Introduction: Welcome to this new course on Google Maps, in mobile applications with PhoneGap, My name is Edward Daniel
00:00:05.900 --> 00:00:12.500
Vidal GarcÃa and I will be your instructor throughout the course
00:00:12.500 --> 00:00:13.600
In this course with PhoneGap
00:00:13.800 --> 00:00:20.900
We are going to add maps to the application, google maps, we are going to learn how to use the google api,
00:00:21.400 --> 00:00:26.900
we are going to learn to use the markers, to customize them
00:00:26.900 --> 00:00:31.200
We are going to learn to also use the geolocation of the cell phone
00:00:31.400 --> 00:00:38.700
We will learn to find places on the map and also, we will be able to navigate on the map
00:00:38.700 --> 00:00:40.500
with the cell phone's GPS
00:00:40.500 --> 00:00:47.200
and I tell you that this course will always be constantly updated, so we'll see you
00:00:47.200 --> 00:00:47.700
in the course.
2. Installing Phonegap, Node JS and Phonegap Developer: In this chapter we are going to start by installing our work environment.
00:00:06.300 --> 00:00:13.000
The first thing we are going to do is enter the PhoneGap page, which is the one that will do all the compilation
00:00:13.000 --> 00:00:14.900
of the project, with phonegap
00:00:14.000 --> 00:00:21.300
We can create hybrid applications working it with HTML CSS and JavaScript.
00:00:21.300 --> 00:00:33.200
In this part we are going to go to "Get Started" and we can install a desktop version or we can install
00:00:33.400 --> 00:00:41.600
a version from the terminal, but for this, to install it from the terminal which is how we are going to work
00:00:41.600 --> 00:00:45.000
in this course, we need to install Node.js
00:00:47.800 --> 00:00:57.700
let's download Node.js first of all, I already have it downloaded here, I already have it even installed
00:00:57.800 --> 00:00:59.800
but the steps are very simple.
00:00:59.901 --> 00:01:06.001
Well I didn't just download it, let's download it, this doesn't take long.
00:01:08.001 --> 00:01:19.800
We will need to install Node.js and we will need to install the pohonegap application, the mobile application.
00:01:19.801 --> 00:01:28.100
to see how the applications that we are developing are looking, then in
00:01:28.101 --> 00:01:36.500
the cell phone what we are going to do, this is a remote connection that I have with my cell phone and I can go
00:01:36.501 --> 00:01:41.100
manipulating the cell phone and here we can see what is on the cell phone.
00:01:41.201 --> 00:01:49.900
We are going to search for "PhoneGap Developer and we are going to install this application that we have here
00:01:50.701 --> 00:01:58.000
I already opened it, what this application does is connect to our project that we are developing.
00:01:58.002 --> 00:01:05.700
We are going to see this later here we pass the ip and we give it to connect, but hey right now
00:02:05.702 --> 00:02:07.900
we are in the facility.
00:02:07.002 --> 00:02:14.900
So we already know that we have to install Phonegap Developer on the cell phone and on the computer we go
00:02:14.902 --> 00:02:20.000
to install node.js, this is installed very easy you just have to give it next next or
00:02:20.002 --> 00:02:29.100
continue, ready and we will install node.js and npm
00:02:29.202 --> 00:02:37.000
Once we have installed node.js, we can click here and install phonegap from
00:02:37.002 --> 00:02:47.600
the command, from the command line, then to install it, we are going to open a terminal and go
00:02:47.602 --> 00:02:56.200
To copy and paste this line, we copy and paste it and the installation begins there.
00:02:56.303 --> 00:02:04.000
Well I'm going to cancel it because I already have phonegap installed, to see if phonegap was installed
00:03:04.103 --> 00:03:14.600
correctly, I am going to write the phonegap command and give it enter, so if it stayed installed, here I will see the
00:03:14.603 --> 00:03:25.800
description and all the commands that I can execute, I can see the version that I install from phonegap
00:03:26.103 --> 00:03:35.400
--version, is the version that I have, at the moment 8.2.2
00:03:36.003 --> 00:03:42.100
Well with that we finished our installation and we already have our work environment
00:03:42.103 --> 00:03:43.000
ready to start.
00:03:43.003 --> 00:03:52.100
We already know that what phonegap is going to help us do is create hybrid applications, building them
00:03:52.103 --> 00:03:56.400
with HTML, CSS and JavaScript.
00:03:56.503 --> 00:03:58.600
See you in the next class.
3. Creating Application with Phonegap: Let's start creating our first application.
00:00:03.000 --> 00:00:12.400
So for this, I'm going to open a terminal or if I'm in Windows I'm going to open the command prompt and
00:00:12.400 --> 00:00:15.200
the commands will be the same.
00:00:15.200 --> 00:00:27.100
I have a folder created here, on my desktop I have a folder called "applications" here I go
00:00:27.100 --> 00:00:35.300
to enter that folder with the command "cd" and I am going to drag this folder to the terminal and I am going to give enter, there already
00:00:35.300 --> 00:00:43.400
I am inside the folder, I can list it with the command "ls" and inside the folder I have nothing, to create the
00:00:43.400 --> 00:00:44.900
first application
00:00:45.300 --> 00:00:56.300
we are going to put the command "phonegap create maps", I am going to name it
00:00:56.301 -->00:01:00.000
I'm going to call the project maps and I'm going to give it enter.
00:01:01.701 --> 00:01:08.800
He begins to create our folder for me, here he tells me that he is creating a new cordova project, which is
00:01:08.801 --> 00:01:17.200
the engine it works with, which phonegap, ionic and other dependencies work with.
00:01:17.201 --> 00:01:26.000
We wait a moment while you create the project, we are going to look in the folder, here we see that you already created the
00:01:26.001 --> 00:01:36.400
project but still adding, well done! , we will drag this folder to the editor
00:01:36.401 --> 00:01:41.600
of text that we have in this case I have sublime text, there I have it
00:01:44.901 --> 00:01:54.200
in the "maps" folder we can see these files, in the "platforms" folder, which is empty at that time
00:01:54.202 --> 00:01:02.400
in "platforms" is where the apk will be once when we have already compiled it, the plugins that we go
00:02:02.402 --> 00:02:12.800
to be adding if necessary, the config.xml where we are going to change the project settings and these are
00:02:12.902 --> 00:02:24.100
files that tell us how we can use the versions, how we can access other files
00:02:24.202 --> 00:02:33.500
external and inside the folder called "www" is where we are going to work, that with these many we are already
00:02:33.502 --> 00:02:35.300
familiar.
00:02:35.402 --> 00:02:42.200
When we are going to create a hybrid application what we do is add all our HTML, CSS and JavaScript code
00:02:42.802 --> 00:02:50.400
as if we were creating a web page and this index.html file is the one that we are going to
00:02:50.402 --> 00:02:51.100
to use.
00:02:51.102 --> 00:02:54.900
I'm going to delete all this, these comments.
00:02:55.203 --> 00:02:01.000
I'm going to erase this up to here, so that I don't remove so many lines.
00:03:02.303 --> 00:03:10.000
Ready, this is how our file will be, I'm going to make it bigger
00:03:11.103 --> 00:03:24.100
Here I am going to call it maps, I am going to delete this here and I am going to put a label and I am going to call it.
00:03:24.103 --> 00:03:25.600
"Testing ..."
00:03:26.903 --> 00:03:35.100
Well, I already want to see how my application is looking, although we have not done anything but let's see how
00:03:35.103 --> 00:03:36.500
seen on the cell phone.
00:03:36.703 --> 00:03:46.500
So on my cell phone that I have here the screen I already have phonegap installed to be able to connect
00:03:46.803 --> 00:03:48.800
from the app.
00:03:48.803 --> 00:03:55.200
I must launch a command from the terminal that command is "phonegap serve"
00:03:56.704 --> 00:03:05.200
This is what it will do, is that it will create a phonegap server, to be able to connect to my project.
00:04:05.204 --> 00:04:07.900
Well here I am in the folder called "applications"
00:04:07.904 --> 00:04:12.400
I'm going to delete, I'm going to enter with the command "cd maps /"
00:04:12.804 --> 00:04:16.000
Now I am going to put the command "phonegap serve"
00:04:17.504 --> 00:04:26.000
We are going to create the server and here it tells us what is the IP and the port through which they are listening and if
00:04:26.004 --> 00:04:34.200
I want to stop I press "ctrl c" to stop the server. From the cellphone.
00:04:34.204 --> 00:04:43.200
I'm going to connect, let's go to this screen, I'm going to click connect because I already have the address right
00:04:43.204 --> 00:04:56.000
IP and here it tells me what is happening at the moment, there either connecting when I get the 200 is because
00:04:57.004 --> 00:04:58.200
it is already connected
00:04:58.205 --> 00:04:08.300
Well there it already tells me Testing and what appears like this is because I have a related stylesheet, the
00:05:08.305 --> 00:05:20.300
I am going to remove, I am going to save and we are going to wait for it to automatically refresh itself, I don't have to do
00:05:20.305 --> 00:05:20.700
nothing.
00:05:21.705 --> 00:05:23.100
Let's look.
00:05:23.605 --> 00:05:32.600
I'm not giving it an update or anything, but what phonegap does is that it fires a socket.
00:05:32.805 --> 00:05:39.300
Here we can see that he is the one who is listening to everything that we are modifying.
00:05:39.505 --> 00:05:47.200
We are going to put "testing" here, I'm going to give it "ctrl s" to save and I'm not going to do anything to my application.
00:05:47.305 --> 00:05:52.300
There it is still and we can see how it is running.
00:05:52.506 --> 00:05:00.700
I can write my code and I can see how it looks in real time.
00:06:00.806 --> 00:06:06.500
Then with that we conclude the creation of our application of the project where we are going to start
00:06:06.506 --> 00:06:07.900
to add the maps.
4. Adding the Map to the Application: In this class we are going to start by adding our first map to Google Maps.
00:00:06.500 --> 00:00:15.400
What I am going to do is that I am going to connect first to the cell phone to see how it looks and
00:00:15.500 --> 00:00:20.400
from there I'm going to relaunch the server.
00:00:20.400 --> 00:00:27.400
"phonegap serve" and on the cell phone what I'm going to do is open the application
00:00:29.000 --> 00:00:39.100
Let's see here the server is already running I'm going to connect it, there I'm going to connect to see what
00:00:39.100 --> 00:00:42.100
is what is happening.
00:00:42.200 --> 00:00:43.700
let's run this a little bit
00:00:48.100 --> 00:00:56.900
We are going to look at the cell phone, here we are going to put it on this side.
00:00:56.901 --> 00:01:04.800
Well there we can see the cell phone screen right now this is my cell phone, I can manipulate it
00:01:04.801 --> 00:01:05.400
since
00:01:09.101 --> 00:01:11.000
usually.
00:01:12.501 --> 00:01:14.000
Let's delete this from here.
00:01:15.401 --> 00:01:22.300
I am not going to delete this Cordova, this stript yes, this cordova is necessary for me to update
00:01:22.301 --> 00:01:32.600
my page, well we save and we are looking in real time if it is updated, ready there it is already deleted.
00:01:32.601 --> 00:01:38.000
Let's start adding our map, to add our map.
00:01:38.001 --> 00:01:44.000
We are going to add this <div id = "map", we are going to copy it to make it a little faster.
00:01:45.201 --> 00:01:50.800
That still doesn't do anything, but this one is indispensable because this div is where the map will be displayed
00:01:51.301 --> 00:01:55.100
as the documentation shows.
00:01:56.102 --> 00:01:06.200
to that div I am going to add these styles, I am going to add them here in the header, I am telling the map id that it has
00:02:06.202 --> 00:02:16.800
100% high and the HTML and the body, I am removing the margin and I am putting it 100% high, we save
00:02:16.902 --> 00:02:18.300
and they still don't do anything to me.
00:02:20.102 --> 00:02:29.900
We are going to use this script that connects with the Google API
00:02:29.902 --> 00:02:30.400
Maps
00:02:33.302 --> 00:02:38.300
we are going to copy it and we are going to paste it here.
00:02:38.602 --> 00:02:47.900
Ready, here what you are doing is connecting to the Google API and here in the callback what is waiting for a
00:02:47.902 --> 00:02:51.500
function that is to start the map, which is what we have here
00:02:54.303 --> 00:02:04.200
We are going to put it here we copy, well this function "initMap" is what we are sending to the url of
00:03:04.203 --> 00:03:04.900
API of
00:03:04.903 --> 00:03:07.300
Google Maps, the Google API
00:03:07.003 --> 00:03:14.700
So here the first thing we do is create a variable, I named it "MedellÃn" and I pass it the latitude and longitude
00:03:14.803 --> 00:03:22.800
exact location of MedellÃn, then we can modify them depending on where I want the location to appear
00:03:23.403 --> 00:03:28.800
here we are creating a "map" variable and we are creating a new object, all those functions are from
00:03:28.803 --> 00:03:37.900
Google Maps to show the map, and we are telling the map to show it in the map div.
00:03:38.903 --> 00:03:39.600
with JavaScript.
00:03:39.603 --> 00:03:52.500
We are getting the "ElementById", the id of this map and we are passing two attributes that are "center" which
00:03:52.504 --> 00:03:03.000
It is where the map that is MedellÃn will be shown and "zoom" as I want the map to zoom.
00:04:04.404 --> 00:04:14.900
Normally the Google API does not charge for using the map, but it started charging, I can use the
00:04:14.904 --> 00:04:22.700
map normally from Google Maps and what will come out for me is as a developer, let's look, let's save
00:04:23.804 --> 00:04:28.900
and we will wait for it to be activated and that's it.
00:04:28.904 --> 00:04:35.700
So there we can see what tells me that this page cannot be loaded correctly.
00:04:35.704 --> 00:04:43.600
Well, I'm going to click on "ok" from the cell phone, that's it, but still the map is being shown to me and it tells me
00:04:43.604 --> 00:04:49.900
which is for development purposes only.
00:04:50.004 --> 00:04:58.500
If I want my map to appear normally as it appears in Google Maps, I have to register
00:04:59.305 --> 00:04:01.400
on the page in Google.
00:05:01.405 --> 00:05:02.800
We will do that later.
00:05:02.805 --> 00:05:11.200
At the moment we do not need to register because we are not going to use other functions that require the
00:05:11.205 --> 00:05:18.600
API, but something that does have to be very clear is that when I am developing applications for
00:05:18.605 --> 00:05:23.600
mobile phones and I have to use google maps.
00:05:23.805 --> 00:05:31.100
When I register I have to put my credit card, many ask me, when putting the credit card
00:05:31.105 --> 00:05:40.500
credit will they charge? no, I have to put a billing method, the maps charge if I am
00:05:40.505 --> 00:05:47.500
using the maps in web applications, but if I am going to use maps in mobile applications they do not charge me
00:05:47.505 --> 00:05:52.600
nothing, but I still must have my credit card, for these examples.
00:05:53.005 --> 00:05:59.000
For these first examples I am going to use them without the key and my map will show as it is
00:05:59.006 --> 00:05:10.300
in this case, laterthat we are going to do the registration, an API that I use is this.
00:06:10.606 --> 00:06:16.800
I hope they don't use it because it won't work for them, because I deactivate it once I finish the course.
00:06:16.906 --> 00:06:23.900
It is only for the purpose of showing you how it will look like, here I am going to pass a parameter that is key
00:06:25.106 --> 00:06:26.400
here happened the &
00:06:26.506 --> 00:06:34.500
And this is how the map would normally be carried, done.
00:06:34.906 --> 00:06:45.900
But if I don't use the key, it will look like this, as it is here, only for development purposes but more
00:06:45.906 --> 00:06:54.600
forward we are going to do the whole example when we are going to require to use a Google Maps key, which we are going to
00:06:54.607 --> 00:06:01.300
use other functions, but in this case with these first examples we will not require it, but our
00:07:01.307 --> 00:07:09.800
map is going to see how it looks on the screen on the cell phone at this time and that's how easy it was to put our
00:07:09.807 --> 00:07:18.600
first map and we are locating it in MedellÃn, the zoom is how I want it to approach the map, I am going to update the first map
00:07:19.707 --> 00:07:24.200
and we can see that it already looks a little closer
00:07:26.007 --> 00:07:36.100
here I'm going to zoom out a little bit and let's see how it will look, that's it, we've already seen how to add the first
00:07:36.107 --> 00:07:38.200
map to our mobile app.
5. Hide and Show Map Controls: In this chapter we are going to hide and show some controls that in mobile applications are not so necessary.
00:00:08.300 --> 00:00:12.300
Here I have my map, I am using the google API
00:00:13.100 --> 00:00:21.200
If you want to use the Google API and if you want to register, you can go to the class to register in the club
00:00:22.000 --> 00:00:28.100
from Google Maps, it's in one of the sections and they can go back to class.
00:00:28.100 --> 00:00:36.600
You know that we need a credit card for this, but as I told you in the previous class, when I'm
00:00:36.600 --> 00:00:43.900
creating mobile applications, it will not charge me, but if I am showing the maps in
00:00:43.900 --> 00:00:48.400
websites if my credit card will be charged.
00:00:48.800 --> 00:00:53.800
But in mobile applications it is totally free.
00:00:54.501 --> 00:01:05.400
It's like for example these Map and satellite controls, here I have a Map and here I put it on the satellite.
00:01:05.601 --> 00:01:14.900
This zoom control that you will not need, this one either and this one of more and less either, because I zoom with
00:01:14.001 --> 00:01:25.700
both fingers when we use it on mobile devices, to hide those controls I am going to use this one
00:01:25.701 --> 00:01:40.100
here, "zoomControl", I'm going to put a comma and the zoomControl are the ones at the bottom and you can put them
00:01:40.101 --> 00:01:41.500
in false or true
00:01:41.701 --> 00:01:49.300
By default they are true, I do want to remove it and I set it to false.
00:01:49.802 --> 00:01:01.900
We also have this "fullscreencontrol", which would be this one above, which on a mobile device will not work for us
00:02:02.602 --> 00:02:10.500
if I have it full screen, or if I have it on a tiny map and I need that control
00:02:10.502 --> 00:02:11.600
If i can leave it
00:02:14.402 --> 00:02:22.900
the "streetViewControl" is for the little doll here, for me to look at the map.
00:02:25.302 --> 00:02:33.600
With the street function, that's the one that makes me walk all over the street, but in this case it's not there yet
00:02:33.602 --> 00:02:46.400
programmed, we are going to save and it is updating itself and we see that it no longer appears and the "mapTypeControl"
00:02:49.202 --> 00:02:55.300
what it will do is that it will remove this type of map or satellite control from us
00:02:58.803 --> 00:02:08.600
I already saved and it is being updated and with that we already have all the controls that appear on the map and we can them
00:03:09.203 --> 00:03:11.700
hide or show.
00:03:12.103 --> 00:03:19.500
By default they appear in true, they appear on the screen and these options that we have just seen I
00:03:19.503 --> 00:03:20.300
can i remove.
6. Add Markers to the Map: We are going to add our first marker to the map, there I already have my function here created
00:00:08.200 --> 00:00:17.400
To make it a little faster, inside the "initMap" function, I'm going to add it here, I'm going to create a
00:00:17.400 --> 00:00:24.800
variable "marker" and I am going to use a Google function which is "google.maps.Marker" and the parameters I am going to pass is
00:00:24.800 --> 00:00:34.900
Medellin "position" that would be this here. we are going to pass that position and we are going to pass
00:00:35.400 --> 00:00:41.800
in the map we are going to pass this "map" which would be this function here, and with that we add our first
00:00:41.800 --> 00:00:56.900
bookmark, we are going to give it save, we are going to wait for them to be updated on the cell phone, they are already there and there we can
00:00:56.900 --> 00:00:58.200
watch.
00:00:58.701 --> 00:01:08.200
We hope it loads a little bit and we can see our first added marker and this way we can
00:01:08.201 --> 00:01:12.100
adding markers in a very easy and practical way.
7. Change Bookmarks for Custom Icons: In this chapter we are going to learn how to add custom icons.
00:00:06.000 --> 00:00:12.400
That is the icon that Google provides us, what is this marker here by default, but I can change it
00:00:12.800 --> 00:00:16.600
for a custom icon, me in the images folder
00:00:16.600 --> 00:00:25.100
I already added an image, a custom icon that is a flag, to add it and change it for this
00:00:25.100 --> 00:00:25.800
icon.
00:00:25.000 --> 00:00:35.400
It is very easy, here I am going to put "icon", the icon property, what I am going to do here is go to the path of where the image is
00:00:35.400 --> 00:00:37.100
as I am here.
00:00:38.100 --> 00:00:46.800
I need to go to the "img" folder, the marker is called marker.png
00:00:47.300 --> 00:00:48.300
I will save and
00:00:51.400 --> 00:00:58.300
I'm going to wait for my map to update and that's how easy it is to add custom markers.
00:00:58.301 --> 00:01:05.200
I can create my own bookmark and change it to the bookmark icon that Google brings by default
00:01:06.201 --> 00:01:10.100
here I can see the bookmark that I added
00:01:10.501 --> 00:01:19.400
And it is only by adding this line of code, I pass the icon attribute and I pass the path where I have
00:01:19.501 --> 00:01:22.400
hosted my custom icon.
8. ZoomMarker: We are going to continue adding the click event to the bookmarks, the click event in this case will work for us
00:00:09.200 --> 00:00:10.900
to zoom in on the marker.
00:00:10.900 --> 00:00:21.400
center it and zoom in when we click it, if I click it at this moment nothing happens, it does nothing
00:00:22.200 --> 00:00:24.300
because we haven't activated it yet.
00:00:24.500 --> 00:00:33.300
We are going to add these two new functions and we are going to explain how it works, so I am saying that to the
00:00:33.300 --> 00:00:42.900
Variable Marker which is the marker that when I click it makes me a zoom, that makes a zoom to the map, we send the map
00:00:43.600 --> 00:00:47.400
All those methods are methods that are already created by Google Maps.
00:00:47.501 --> 00:01:00.900
What we do is use them and here I have, for example, my map with a zoom of 9 and that when you
00:01:00.901 --> 00:01:08.900
click me zoom 12 to see the difference, and here what we are saying to the map is
00:01:08.901 --> 00:01:21.600
change the center when we click on the marker, let's see how it works, we already save
00:01:21.701 --> 00:01:24.500
update and this will work is
00:01:24.501 --> 00:01:35.500
When we click on the marker that is going to be a zoom of 13 we will have that little window, here I will click
00:01:35.601 --> 00:01:46.500
to the marker and there it already zoomed, here it took me a little longer to zoom, but on the cell phone when
00:01:46.501 --> 00:01:53.300
If you are testing yourself, you will see that it does not have that rattling effect, it is only because it is
00:01:53.302 --> 00:01:02.200
connected remotely and so we can zoom to the markers by adding these two functions, the function
00:02:02.202 --> 00:02:11.800
click on the marker and the "center_changed" function to change the center of the map when we give it
00:02:11.802 --> 00:02:12.200
click.
9. AnimationMarker: In this chapter we are going to add animation to the markers, that I can drag them, that they can
00:00:07.100 --> 00:00:18.200
make a drop, jump, let's see how we can work this part, I'm going to delete this from here, it's one of the controls
00:00:19.600 --> 00:00:27.900
so I'm going to add these two attributes here draggable and animation
00:00:28.100 --> 00:00:38.100
We are going to call a Google animation that what it does is that the marker will jump, well, I am going to create a function
00:00:39.200 --> 00:00:45.500
I have this function here, we are not going to create it inside "initMap", but we are going to create it outside.
00:00:46.000 --> 00:00:55.300
The "toggleBounce" function, what it does is that it will obtain a marker and if the marker is in null, it does not have the getAnimation, if this animation
00:00:55.300 --> 00:00:56.500
no this.
00:00:56.501 --> 00:00:04.200
In other words, it will not do any animation, if the animation is there if we have it here set in the properties
00:01:04.201 --> 00:01:05.300
from the market.
00:01:06.301 --> 00:01:14.500
Well here I was wrong and I put it on the map and I have to put it on the marker
00:01:18.301 --> 00:01:30.700
to the marker, to this one here, ready, I already put it there, there we can see the animation that the marker makes when it falls but we are going to finish
00:01:30.701 --> 00:01:40.800
first and we would need to call the marker, here we are going to tell you that when we click the marker go
00:01:40.801 --> 00:01:47.500
to call this function that will pass it to this Google animation, this animation is already created
00:01:48.401 --> 00:01:52.200
by the Google API and what we do is call it.
00:01:52.201 --> 00:01:58.800
Well, since we are calling the Marker outside of this function, I can't create this variable in here because
00:01:58.902 --> 00:01:03.100
this marker will only serve me within that function.
00:02:03.202 --> 00:02:10.100
What I'm going to do is that I'm going to create the marker here, I'm going to save
00:02:13.802 --> 00:02:23.500
and you already saw there how the animation does, that the marker is falling, let's look
00:02:23.502 --> 00:02:24.900
again.
00:02:24.902 --> 00:02:26.400
We hope it updates
00:02:30.902 --> 00:02:32.500
and there it is.
00:02:32.502 --> 00:02:41.800
We see how the marker falls and if I click on the marker it will be that animation that begins
00:02:41.802 --> 00:02:48.100
to jump, that is the animation that Google provides us and it is very easy to implement.
00:02:48.102 --> 00:02:54.600
We set the "draggable" properties to true, this is what we will do is that I can move
00:02:54.602 --> 00:02:57.400
the marker with it with the finger with the touch
00:02:57.703 --> 00:02:06.000
There they are seeing how I can place the marker where I want good and the animation is for it to go
00:03:06.003 --> 00:03:14.900
jumping and how it is and we call it with the event "click" and I click it again and it stays still and yes
00:03:14.903 --> 00:03:20.400
I click the marker again, it calls the animation, we are calling this
00:03:20.403 --> 00:03:26.800
function and we tell the marker to pass the animation with Google Maps Animation
00:03:27.803 --> 00:03:30.900
Well that was it for the animation part.