Geolocation with HTML5 and Google Maps in mobile Apps

1. Welcome: 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.