Google Map JavaScript API for Beginners | Girish Shakya | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
26 Lessons (2h 16m)
    • 1. Course Overview

    • 2. Complete Overview of Google Map API

    • 3. Making Google Map Device Compatible

    • 4. Controlling Map with Localization

    • 5. Accessing argument in UI Events

    • 6. Display Marker on Mouse click on Particular Location

    • 7. Practical Placing Markers from input type select

    • 8. Basic Map Type Example

    • 9. Basic Map Type Example cont

    • 10. Global and local map variables

    • 11. Rotate Map to 45 Degree Imaginary

    • 12. Sign in to Google Map With GMAIL Account

    • 13. Testing Google Signed Map in Android Device

    • 14. Testing Google Map Sign in and Android

    • 15. Save to Google Map with Info Window

    • 16. Info Window Output

    • 17. Add a Marker to Map

    • 18. Removing a Marker

    • 19. Animate a Marker

    • 20. Adding Bounce Function to Marker

    • 21. Adding Simple Icons

    • 22. Make a Draggble Marker

    • 23. Marking Polylines

    • 24. Inspecting a Polyline

    • 25. Marking a Polygon

    • 26. Add a Ground Overlay


About This Class


Did you want to integrate Google Map in your Websites or Mobile application like Android,IOS and don't no how to integrate and create programs in Google Map by using Google Map JavaScript APIs.

"This is a perfect startup guide for YOU"

This conceptual Course is designed to let you quickly start exploring and developing applications with the Google Maps API. This 45 minute tutorial contains videos with complete explanation of Google Map APIs and guide you from the scratch to create google map application and integration of google map apps in your websites or Android / IOS application.

This course structured in a Video format tutorial and at the end of each section source code is included for future reference.

Take this course if you want to have a good startup in Google Map JavaScript API or want to integrate Google Map in your Websites/Android/IOS apps.


1. Course Overview: 2. Complete Overview of Google Map API: to work the Google map application. You required a i d. So here I am using That means you can go with this link on. Just click on the download so you can use any I d. But here I'm going like, let be inciting you. Can you stream? We were. You can use clips or whatever you want because night be inside these supports very various languages and as I am a Java developer So that's why I'm more familiar with this Heidi, You can go with your own i d whatever available in the market. So click on download and here download these complete bundle and save it somewhere in your directory. So this is my downloadable Let beans you see fire And I said here in my dollars holders just click on it on it will start your installation so you need to wait for it and it will configure the installer installer. And here, if you want to customize, you can click on the customer's button and I'm going to add one more server one times their Apache and people. Next I accept the terms and condition. Then click on next. Ok, once again at sublicense click on next on here. These are the Ah, but for your net beans I d on Judy. So to install that bin Saidi you particularly the acquired jury gay and that it is a job, a development kit because the soul concept of nick means is to create, I mean, concept off segments to create job applications. So here it will started process, and you need to wait for it. And this is how you can install that? Because I d for your prepare for your we're creating application love only in job, but also also their application. Click on it started and check it whether it's working fine or not. So this is how you can install that bin Zaidi a 0.0 point two on tensile watching this tutorial. Ah, so we will start, Mr Drill, we will start with creating some good applications and uh huh, Google map JavaScript e p. A. Thanks for watching it. Let us start with Google map JavaScript, a p a open Google served in your favorite browser and the simply type Google map tutorials . And here you will get a link that is getting started. Kugel map chalice, script a p I and just click on this link, it will lend you in a new Google developer speech. Are you can go with this link Also, this is a whole set of complete tutorials on Java JavaScript, e p A and just the type of audience needed to learn this. A p a in JavaScript is quite a JavaScript, so you should be family in JavaScript. In a recommend Tikrit, Google maps API on your website or oil application, you will need a P I key on this MP. A key enable you to monitor your applications may appear, you say, and ensure that the Google can contact you about her application if necessary. This help you to know about your usage limit? You said limit is 1/4 that count ur map loads each day. So if your map Lourdes is more than 25,000 members are more each day for more than 90 consecutive day, Google will contact you and you need to pay extra amount. So the first step is to open your Google Council Onda after opening a Google console here you need to create a new project on Do are for creating this project Ah, you will be able to get die peaky. So let's start. So let's create a new project here. Just open your Google developer console. Onda opened a new window to create a new project you required toe log in with your Gmail account. So this Magimel account open it. And from here you can select this drop down on create a project or simply click on the blue button. Onda Leamer Project Eso I limit toe Google map tutorial are simply, say, a project on Created So after creating a project just here. As you can see, it's a processing. So when sports is complete, you are Google. My project is ready. And now from here here you can go to the properties and select the A P A and Art Onda and click on GPS. And from here you need to select the Google map JavaScript e p. A. On here you need toe click on enable a p a. And after this, just click on this view reports in a p A console. And let's see whether Google has changed policies or not because, um, in the last time okay, here. As you can see, there haven't they're not giving us any kind off for a p a key. So that means you can use a simple E p a and Google, uh, projects. So, uh, so as you can see out here knowing PKK has been provided by the local console So this means you can use JavaScript, JavaScript, Google JavaScript, default eso. But later on, I will show you how you have anybody launcher application in market globally. The time you required it. Be a key level com later. So this is very, very simple cold written in esteem. All five So And this is my JavaScript. So as you know, the type of JavaScript and the source file here. As you can see, it's a match, not overly. P i dot coms and here way have a A key on this is the script. And as you can see out here, we have a function name in its allies and in dysfunction. We have a re abilities and my options that contains a key value pair on day. One more variable. We have a map. Andi, that have a element i d. In a dip tag said is a map canvas on here. We have a map options there. Select a center of latitude, a key center later longitude and latitude and zoom off it. And if you want to add a listener so that your map will be load at the time of installation , you need to use this listener. So this is a very starting. So let's create a simple project and we show you how you can upload their map in our STM. Oh peach. So let's clear the project and that see the name with a girl of its track with map Onda and okay, just change it to the to find name that says thank you anywhere. So this is just a simple here. I'm just going to make a copy paste off this court here in my application. So I'm using here. And that means idea you can use any I D debt you purport on Dhere. I'm going to run this application on a particular server. So here I'm selecting glass fish. You can use any sort of whatever you like. I just take on finish. Who here this is my project on is my index speech. So what exactly I'm going to do in this application This is my index page. I'm just going to make a copy paste off this whole complete court so that you will be able to see an output off a Google map. So just select all and make a copy based on Do simply run this application and the our favorite Broza. Here I am working with net beans. You can use the clips you can use. Dream we were whatever you like on. As you can see, it's asking me for a P I key is invalid because we didn't have a key over here providing value. So let me delete this perimeter off key and a peaky as we know now, Google, you can simply use this source for this job script Andi, knowledge on this application. So this is my very doorstep output in the Google Man. So as you can see, it's quite easy Later when we will see how so literal visor or last example line my life to work with Google map JavaScript, api I you need toe have a STM on life support. So here I am, losing DSP so that I can add dynamic contents. So let me name this file. My map you can use PHP are you can use estimate time because it s table five essential because May only support estimate Fight So it's this the tag that you need to include If you want a steam on life support As you can see out here this jsp Peach Support s team of five Onda Let's change the title off my page toe my map reason And after this unique art, let's run this application Although it will simply show you the hello wallahs and output as you can succeed just output Hello, world No. Here. I'm going to add the Google map could so move back here on As you can see up here in this, uh, this is the style. If you want to add a particular style or CSS while in your application, you can do it. It is a whole bunch of court, and I wouldn't revise you what each light means on this is a style that I'm going to add a doubt over here inside the head tag. So the stay on the type is next on CSS and let's make a steam will fight the speech. My my pitch with a height off 100% on bodies on 100% with a margin of zero and petting off zero on. Then we have a i d off dip tech that is a map canvas. And this is the place where it will show your map. So let's have it STM Well, with some attribute on, did the hide off for the 100% on the body? With the height off 100% you can also use country participates body were working with the I d. Like clips are then that means on the machine I'm just putting 20 and padding toe zero and you record I d idea off your dip tag because in the dip, tiger map will be display. So what I'm going to do, I'm going to create first I'm going to create here a dip type Andi ideals just dip taggers , map cash, canvas Simply like this. You can copy it and paste it there Or who want to change a different i d when it's all your wish to do that. But let me take the same. I like to see my i d. So he had i d on it is the map can Waas and just declare your idea in your style that is in your CSS hash map on I will take its height also to the 100%. What does my CSS and next thing. But I required here I need to type ah, each other script. So, as we know to it, is the map canvas. But this particular CSS So this is a declaration means that social that your canvas should take 100% height, and here I'm going to use a script means basically, it's a Google map, a p A. This is how you can include your Google maps. API I in your STM a five or Java script are BSB Beach, so this is a density, but you need to write. Just make source on. Remember, when will you work with the Google Maps? You always need to have a good Internet connection. Onda Sources Match start Google ap eyes dot com on four slash maps on then e p. A forward slash Jess. So it didn't require did hear a key because as we're already going through the console, the proper consoles and it's not required now. So this is the I. P I. hear you. If you want to use a Google map, you need to include It's a p A. So this is how it needs to be them. So you can see out here, https or http, if you're using a sit ups under commend us because it will secure your page on it would move your data mostly curly. And no, just try to run this application. That is the my map talk jsp. So when you run it, nothing is going to be happen because it we have a p i off map, but we're not writing any court for it. So here you need toe write a function. That function name is any slice. Although you can use any name that's by your I wish Onda And here you need toe declare some variables. So here, let's have a JavaScript or map. And, uh hey, I'm going to write a function in this life, Okay? Like me. And it has a name off where I'm good creative. We're options that contains zoom in the center. So, as you can see out here, honey, who it It's a script. Actually, the time Stephen type is destined, jealous script and now here you need to help to key that toe attributes that zoom on 2nd 1 the center soon means toe. Make your map zoom to level it. Andi. You can also have a different value up to 18 on the center means that define the longitude and latitude means where exactly should of the center off her map. And you need to create an object from the googles dot Maps, doctor, long ality and LNG. And here you need to bus an argument off. Two argument. The 1st 1 is the latitude, and 2nd 1 is the love that you So this is a basic requirement. If you're not using the center Matt full work, but it will not have a center coordinate over here means or to a particular coordinate. So let me copy it and paste it here. No, this is my options. That means these are the options that should map a particular include well, here I'm going to create an object off man Onda and this is the object. And in this map I will pass these arguments. The first argument that I need here is the document dark to get element by i d that is I'm going to display this map in this dip type. And it's my idea. It is a map. Can waas one second one. What should we attribute this may contain. So, uh, attribute that that the map should contains other map options. Onda civet on the last. So when this map should be open So as you can see out here, we have a And here I'm going to use window dot unload. I'm calling a method off. Functional, estimable on Whenever the wind alludes, it will call Emma matter. Did your function that is a slice? Andi, this is how it going to happen. So So let's on this application And here I think the code is perfectly fine on Okay, you need toe writing home. You need to just do you that bracket and save your application. Ondas you can see No, we have a map. So this is how you required a map. Options required a object off map and you need to supply a document. But I d on all this knowledge lewd map script by calling a function. So this is the function on. You can create this a script. You can try dysfunction toe lewd this map dynamically whenever is called function. So I will copy this particular function. As you can see out here, it contain a script that's his create element There say the script on its type. That is the JavaScript. It's type. Is JavaScript on the source? That is the A P. I is what I want to load that this one. And as you can see, it can't. Uh, this is my document. Upend the child Onder. Now, as you can see out here, So to load this function, you need to call this function individually. So this is what something we're writing each and every code inside a single function entered up using a script individually on it contains an interview to design underscore into true. So this will help you toe track your map. Anybody use the device or a different X stop. And as you can see, it says the unexpected. It'll because we're loading the JavaScript Ah, two times one from it, directly bypassing the source in a script tag on second by calling it from functions. So let me delete it, Onda. And now it's quite simple. I will just know. Let's run it. So, as you can see, it contains a sign in because we're using a silent of school in attribute or a perimeter in a script source. So this is how you can call a function and below the script another. See a map dom element so you can all if you want to. I want individual style in the are dip tack you can. You can simply use a style attribute in a day. You can individual pass that key and will appear. Andi map options are options. Contains Attribute that the map should required, for example, here that you can see we're the center and zoom Andi uh, center contains. Ah, if you want to create a center the map on a specific point you can use a let on LNG ality LNG object On this Alan T and Ellen Ellen G. Object to the Littles. You can point a center by any this tree line of court anyone. The 1st 1 is a by using an object. 2nd 1 we are just directly passing along to the latitude. So here this time we have used a object that is a new Google maps, totality and LNG on. You can also go with the second and third wonder you condone it. We initialize the longitude and latitude by using attribute of reality and LNG are you can really use the first place LNG or reality. So any one of this work. But you need to use any off this cable repair or you can say attribute off map options only one time. So here I am using the last one. You save it now you can do you see the same. So here it's the center is at this particular longitude and latitude. And if you don't want to use the center, you didn't use it. And now content zoom level. And as you can see, initial zoom level, which is used to display the map on it, comes with its own property and it start from 07 or 18 08 18. So if I put a different value, that 18 So this is something a maximum See as an output is something known as a medical on . Do let me change to default. Last one I love changed toe the different value waiting. Okay, the same thing. This is the maximum zoom elected Jane it are. This is the one time that object. So the map object means that the map object contain he, our Dave, Heidi, Andi the properties off map that the simple properties options were variable on. This is also the constructor that contains two argument. And to load a map, you need to use a listener off event off map that is, you need to call a function at it is add Dome listener from the google dot map start events that I don't Mr On do for troubleshooting, you can go here. So this is something like a getting started with the map application on what eaten every line mean to us. So you required a map options, my bob check and and the listener to load a basic map. And here, as you can see, you have some zoom and zoom out properties. So let's do it and let's play with the map their own. We will three some good hands on application by Google map. Thank you not just try to perform a event listener by using a button instead of using a window dot on on load for our function. So here I am, using a button on Do. You can also use the different, uh, event a listener concept by using a check boxes or redo patents. So let's have a button, and whenever you click on a button, it will load the script. It is a lot of good function, so create a button on comment Window download, 100 application Onda and just click on the button. So here you will see below the map whenever users click on a button. So, as you consider is how how simple toe create Google Map application Tents are watching this tutorial notice provided input off longer to the latitude by using input element of type text. So here, I'm going to use to input element That is the type of text on, but it is going to be a ah, you can see Okay, uh, number. So here I will use to ID's that is first for latitude Onda. Let's have a hint of placeholder selected to and second level use input type number as a lot of you. Andi. Whenever user kick on the bottom, it will, uh, look it. You are, uh it will look at the center point with this longitude on letting you So it's quite simple . You can play with the map by providing the friend input elemental Here I will use a matter name initialize so as you can see, we already have a mattered initialized. So let me command this loader script and after commenting it, let's used it this initialize. And here I will just take a two variable The 1st 1 is related to on 2nd 1 is longer deuce on Let's have a latitude that is ality document or to get element by i d. On past the idea the input text that his idea has a latitude, physicality And 2nd 1 is that along too on deserved about my options And here I will pass this value It is the ality And second was 2nd 1 is a Renji on. Uh, if you want to change zoom level, even change it Or also you can have for farming. Put type elemental Well, substance it is the select options dropped out, but let it be okay with this to input element on As you can see out here. Uh, this is my script Far floating Google e p ice. It stood up for using the function select copy and paste it here on Do We didn't require this, uh, on Lord Instead of this, we will use a dome listener. But yeah, this was Ah, homelessness. Okay, you don't have this ap a key because as we know, the documentations of a tractor created, it's no longer a fuse. So you can use this just for simple link for testing purpose. So when you run this application, you can see out at Don't. Listener will initialize this particular function by default, but it will not use this latitude and longitude. Ondo, let me try Toe provided input off the latitude and longitude. So let me search for a particular. So here I'm going to search one of the wonder off a world that is atoz mail from Agra, India. So let me copy its latitude and 2nd 1 Here are copies exploded too. On click for a maps. As you can see, it will point you toe this particular along with a collective position. It it Do this Coordinate. There is a man 3. Making Google Map Device Compatible : and destructive. We will learn. How are Google Map fit for different mobile devices. So as you can see that this is my function on here will learn how toe developing for mobile devices. Andi, for this, because the dip tech mostly maybe is not recognised with some older version. So you can use a navigator dot user resent user agent Ah, function for over devices. So as you can see out here in my out, put off a android and later, this is my map on and let me run this application for on entered emulator my last application. That means because in this application, I'm not using any kind off, um, user agent function off first email We don't want to Let's see the difference so you can see extreme too much time to load a map. And here it's also not look so nice because, uh, these are toe friend. The 1st 1 is, As you can see, the 1st 1 is the replication, and this one 2nd 1 is emulator. Or you can see running a Google map and move mobile device. So how we can fit who will devices over with a different set of browser that are running in a desktop application. And laptops are the mobile devices. And also you can see it is movable on our didn't fit for screen completely. Who here? I'm going to write a function as even seeing this deliver document. It has a function that says the Detective Broza. So depending on the Broza, we will try to change the width and height off off our map. So let's copy dysfunction here, and I will show you what exactly the each line means. Okay, here in my any slice function, Okay. Except basically, I will just call me some line of court from here because although you can use a function and college from the initialized function, but let me copy based here these lineup quote. So, as you can see to use it, you need to use a function off estimate. Is the navigated or the user agent on here? If your user user agent, uh, column a targeted index off So if the index if extent index off iPhone that is not equal to minus one, since the same case are with and way what we will do, we will put a bit and height of 100%. So this will occupy a complete browser means all the written height off her Broza and else what? Adex trouble will use a 600 by 800 pixels. So let's run this application first. On android device, you will see the difference and thus far to convince for the textile devices. So for selectman in this application here in a browser, you will see the size off the map has been changed. Toe 600 Syria the size okay to make Google map device comfortable for basically 400 iris, you need to include the matter today. That is it contended Vieux Port Onda. The initial skill of the content is 110 That is for complete screen on no scalable. So why doing this? Your device will be comfortable, but android and IOS and it will run your javascript properly, so you need to include this type inside the head, head, head off, estimate five and lex on this application. Once again, let's see whether it's going to provide us alert or not. So let's see whether it's working or not. Okay, as you can see out here, it gets giving you it pop up that says Android or iPhones In this way? Ah, you can make your device completely comfortable with other mobile devices, So this is the output and hope you enjoy this on. As you can see, it's quite easy to create and build application by using Google maps. You just need to follow some rules so tense or watching this tutorial in the next lesson, we will learn how to make your Google map language comfortable. Thanks. So let us check which user agent has been parking means which, whether if condition is working or else condition of working for mobile devices are and desktop. So here I'm going to create alert. So if within our application in mobile devices like and order iPhone, it will make an alert with an end order iPhone else, it will make it alert off a deck stops, as you can see when I run my application because it's running on the deck, stop it, Say's a Dutch top on and and now next tried to run the same application in my android and later, So let's do it here. I will run my application. I will change it 200 emulator and run it Onda, which were all put, as you know, because it's running on time later. So that's why it's giving this kind of lazy little looting. But let's wait for output, all right? So you can see it's not giving us any kind off alert right now. So let's see why exactly this happened. Okay, let's hear a So you can see it's not giving an alert. So that means we need to make some changes in our HTML five page because are all thing I need to add a meta 10 so lost weight, whether it's giving up or not, and then we'll move to a court. All right. In the next tutorial, we will see how we can add a meditate. So thanks for watching this tutorial. 4. Controlling Map with Localization: Now let's talk about the look language, localization and Google map so you can localize the Google maps. API I application both by altering different languages settings and by setting the applications Reason could. So here, just by changing one perimeter, that is, uh, he's arguing a perimeter argument like parental language on Dhere. RG a means for Japan and let me go in this application just watching in one language perimeter, you will see the effect in your map so as you can see up here. But why I went on this application. Okay, let's say the death stop and now see, it's it's having a local language off a Japanese language. So lots more countries are available, not a Japanese, but you can have your application in a different language. Form it like Chinese Indian languages, UK, us on all this. So let's see out here, and there are some example given it over here. And if you want to see the support of the stuff, languages just click on this link, and here you will find the different languages of level. So these are the language. Quote. This is a complete table. That said, the language court and with a particular language. So if we want to change your language to the friend former like here, I'm from India. So if I wanted to Hindi so I will just change this g eight to h A. So when I run my application, I will see a different language over here. Little applies language off Hindi. So as you can see how easy to work with Google, map all the PSR provided by them, and you just need to change some parameters. And you need to just make some kind of argument here as we know it's the language. So Okay, the second comes the region local addition. Okay, so this will buys our applications means by default ex vice replication to do not the state . If you want to alter your application to serve different map tiles are biased application. You could use a reason argument, Uh, basically a perimeter with your application on it will enforce to that particular local region. So by default, the u K g B. It's not something that clean pretend so by default, X region is GB, and if you want to change it to the other format, you can easily change it. So here I'm going to change this region. Toe GV means the values. Jeeva is a great pretend so here to Skopje, this one and deletes language and put it this region at a simply manual application. You will see the different easily over here. Notice how exactly work and if you want oh US load for China, you can easily go with Google map. Andi. Type this https and here's you can see just changing the one line. You will see the difference. Let's let's discuss about types of organs available for Google member P a. Andi The Worsening. This is also known as the Virgin in Control. These are basically of two types. The 1st 1 of the experiment over them, and 2nd 1 of the release was, um so experimental version on the numbers are from 3 to 1.18 3.21 point acting. And remember, if you are not explicitly defining a wasn than by the fire taken as a, uh, experimentalism so when you created application as experimental even used the worsening, you can add one more parameter. Let's say the V E. R. V. Equal to three point XP. So this will take a take taken as experiment a war zone on when you after completing a project and when you want to launch a project in a market you can take, you can use a explicit version. It is also one of the reasons. So here you can use if you want to work, are on your application with three wasn't three off. Maybe you can use it explicitly used three or 3.19 water work. So all these reasons are bad but comfortable on and this will be helpful. So one point, this is a little more than 3.19 on defusing three point ah, 19 This will be a bad but comfortable with all the all of the words and starting from three point Zito 3.18 So this is all about the world earning potential. Watching the tutorial Andi in future soon I'm going to update this tutorial with more advanced concepts comes in the Google Maps. So this is just for a big now and I hope by reading old document on By creating all this application from the scratch, he will be ableto know how Google might actually work on. Also, I'm go and then you can collect the so score on going to include here in the recommendation . Now, let's talk about the controls available in a Google map. So there are some controls that are building controls and there are some which are not default in your map. So here, I'm going to explain you the overview of controls. So here you will find zoom control dips comes with a handful off building control. 2nd 1 is the pan control that you can rotate. You are, um, at ah 2 45 imaginary. If available skill control doesn't come by the fort are you need toe in a bullet and then comes the map type control on. This is a total of you that you can you can view your map on the road. This road map a satellite on this control comes by the fall on the street of you Control it contains a Pac Man icon. Whenever you drag and drop on particular portion of map, it will show you the street view and then rotate control so that you can rotate your map toe 45 degree imaginary on the overview map controlled. It is a physical terminal. So here, to use the map control you can you to set options off for my potions. Object Onda. And remember, not all these controls are enable you need toe some of that in a winnable by the fighters I'm off. Then you need to make enable. And here's come to controls different after control that you can see out here that the zoom pan map tight on a skill on here. Ah, the map epi a default be provided for large screen small screen and for iPhone android for large screen. As you can see, Zoom is 400 by 3 50 pixels on a smaller screen, and I fall. It's not available. You can use a finger pinch on an android X. You can make a zoom, but he was in touch. Style. Control on the plan is not coming a small screen and also not available in iPhone and Android as well as when you talk about the map type control, it's ah, you can have a whole is underbody screen that is a 300% bite. I'm larger as some very smaller screen on iPhone. Same same at this large and small screen s presented Also, skill is not present right now. Not actually how we can disable the default. You I use interface control so you can use the maps. Default visible default. Your properties has been here and the set to true. So when you do this here, let me show you in our example. So as we can see, this is my niece. Lies function. And here, after the zoom attribute what I'm going to do. I'm going to disable that default user entries. So you had just you can say here just I'm going to right here using that property. That name is disabled. Default you I so disable default you. I set it to true Onda. And after doing this just to try toe run, we are indexed or esteem of Pete once again. So as you can see, we're having some enabled his interface control interface over here and law. Now, when we refresh it, as you can see, no, no control means no controls are available over here. That means the zoom in, zoom out and pick man controls. So if you want a clear or a simple map without any user interface control even simply used this property. That is that this Ah, disability fault, you white on. If I commented it on then where? When I tried to run this application this page once again, As you can see out here, it will once again display that default user interface control. As you can see, here we have a Zonen's amount and the big man like this Derek send a lot of snow control Bregman control here like this. So as you can see, it's quite easy to work with, ah, user interface control. And so go through it and try to I tried to use this particular attribute. Okay, it's kind of map from two this key value pair. So thanks for watching. No, let's learn ho. We can add or modify controls to the map. Okay, If you wish to tell your interface by removing, adding or modifying your behaviour control on ensure that future of the updates does not alter this behavior you can use the Boolean values means here the lots off attributes are available and here you can just change the bullion to tour falls by making true, it will be available in your map. If we're making falls, it will be disabled. So here I'm going to use a pen control zoom continent, scale control And I'm setting into false to falls and wants to true. So you will see here the changes in our application. So here the pan control I'm making it false so and some control and making it falls and only the skill control is going to be true. So this means you can skill your map but you cannot zoom our pen. You can use this to are not enable. So let me run this application once again. So here, as you can see as an output, only one does this Penguin controllers enable Onda we didn't having We didn't have the zoom control. We only have the skill control. So you have talked about the control options on several country options are available. The first let's see about the zoom control onto you zoom control. You can use the control zoom control option contraptions field. And here there are three types of styles often available like a small large on default and same case with the method map type control and you can display of my control by horizontal drop down or before that usually comes when you're not using to stay. So as you can see out here in this inner example, I'm going to use the map type control, the true on the Styx to the different format. So here in this example, So let me, I believe this three on Dhere. I'm going to use map type control. True Onda. Let's have some attribute are for the map type control options, and here I'm going to set the style like map type control options. Alexis you Some attribute off this variable like the 1st 1 that I'm going to use out here. The style, the style that display this control in your map. So the host come the style attribute. So it is going to be like google dot maps 0.2 Map type control Thai. So this is going to this type on here. It's having a default so you can have a default. Or even if the rest of the two also on let's start on the idea. That means what are the different types off means what, how you can display or map in different styles. So here I'm going to add the i. D. So it's just being hanged. Okay, so we will do this, Accomplish this task in the next tutorial. Thanks for watching it. No, here you can display this sty here as we know the last time that my segments is little bit . Hang. So here I'm just going to use the map type ID's our field Mac type ID's and here, like me, use an area off these types. So the 1st 1 is the go maps type I D roadmap and second and will be experience on here Google start match dot map type i d dot road map a second when I'm going to you that Tevin okay, known to save it. And this tried to run this application and also here and then just adding some more attribute off the zoom type that zoom control on making true on the display off zoom control here I'm going to use as you can see the opponent's style by using zoom control options. It's going to be small. So let act this to feels also are you conceits and attributes. So the first kind of zoom control I'm making it too, so it don't control by the file. It's already enable, but here also you can also manual indicate it. And here the zoom controls options, the style on which the zoom control eyes going to be display. So here is going to be style and the google dot maps dot zoom controlled Styx thought Let's make it a small like this to save it. And, as you can see how out here in the output on you can see the zoom control style, it's no okays. It's my okay, Let me check it out. You cannot run it once again. Okay? There may be some kind off syntactical error. Okay, It's zoom control options. OK, No, let's run it once again. So now you can see here as a zone output. Now the zoom control is is in a small style, just having a plus and minus sign to zoom in and zoom out. So this is how you can just changing a simple attribute off the control options. You can have a different type of user interface, and as you can see, it's constantly a small large and default. Similarly, you can have a map type control that can appear on different means in a different places off your map. So it's something like, Hold is under bar. And let me copy this one. I'm sorry at the second will drop down and turned into default. So you were using a default on. Let's change it to the drop down menu on Bennett once again. And as you can see out here No, this is the A Z. You can see the Met Control is no. It's a drug probe, so you can change it. Toe the language selected this Chinese. Sorry. Japan is exactly like we change this language toe the T fall of language. So it has changed to Js in Japan to the friend wants a here. As you can see, it's a map. Control now isn't drop down, so you can have a turnover here on Gueye. Depart one also. This is how you can Just changing a simple active you can You can change the behavior control behavior of her map. So some more available here. All right. So, tensile washing this tutorial in in the next tutorial, we will explore this concept much more gritty. Now, let's talk about the control positioning off man on this can be done by using a type control position on by using this country Poor country position. You can place your controls off the map Anywhere in your map means the spirit map. So basically, these are the control presented. A supportable that are the top center top left. So here, as you can see from the map, top left drop center top. Right, Andi Bottom left. Bottom center. Right, Andi left up. Left bottom. Right top, Right bottom, left, center and right center. So you can change the attribute off for the maps. That is a map. Tight control options Art is here. As you can see, you can display a map control and in different positions on the map. So here you have a map that control options and just use a map here. Just just do the position attribute and this use the google dot matched our country positions. That bottom underscore center as here. You can also change it to a different one. So here I'm going to use one of this attribute. And here there is a map type control options of a little over here and here. I'm going to add one I tribute and this variable. So let's do it on here. Just copy and paste this particular on. Do so if you want to change it to other, that the bottom underscores center on bottom of school left or whatever you want to do. So just changing the one attribute. You can have the control on a map in a different location. So here, let me from this application. As you can see, we have a bottom center, so it will display somewhere in the bottom here somewhere here about contra options will be available here when you're on this application. So, like we run it so it should be displayed here. So that's a fresh it. Well, you can see the control off map is available at the bottom center, so if you want to display it somewhere else, you can just change the attribute of water Medical center toe left right are whatever you want. Now, here, as you can see, assume control. If you want to change the position of a zoom control, you can do it. Also, just copy it and use this particular attribute and the zoom control options so soon should here, as you can see June is going to be available in the left center somewhere here, Left under school center on here. I'm going to you the sport so you can do this partition in any control options. So here that by using this attribute, your control options will be available based on that particular position. So let's run this application. And as you can see, it appear here in the left sender Onda And here the skill controls to be true. Andi Street view Control is also going to be true. So, like me, copy this section also Onda and just use this here So he had the Stevie Control is going to be true on let me run this application the first of bridge And now let's add the street view control option. So here in the country options of a street view, I'm going to add the position. So here that is going to left top means somebody the top off left. So copy it on just to hear some left up somewhere here top left. I do just do that here. Save it on. Just refresh it. Official Peach. So it's going to see the position off somewhere in the left undertones in the left top so you can arrange your controls. Means your map controls your zoom. Control your position control. Enter anywhere in the map just by using this partition. Attribute Andi defining the position by using variable. That is a value he had left in the score top. I'm using here who? This is all about? The condole options available in Google map JavaScript, api ice. You can go to it. You concretely all application. And as you can see it quite easy to do and always remember this intact syntax that it is a liberal in hair piece. Thanks for watching it. 5. Accessing argument in UI Events: Hello, friends in distant rural. You will learn how to pass the argument in your events. That means how you can access the argument in your even events. So here I'm going to use a big event on did. It is also one of the most event, and here we will try to display a marker on a particular longer, too. Delighted you. So let's start with the initialization function. So let's this lies a map on do It is a map options. So here, let's make a map options but Zoom and some center. So zoom Andi, I'm making a resume before Let's take a center. That is the position off a longitude and latitude so you can use the object off google dot matt Starter uh, ality LNG constructor. So here this is my basically longer general attitude where your map is going to be centralized and no, you can use a map variable. And Harry, please google dot new google dot map start map And here, just past the i d off your development. It is a good element, but I d. And it is a map canvas. On second thing, you record here the map options So these are the attributes off my map and know exactly what we were going to do here. In this example, we will use a list love that is even listener. Andi, Uh, from the here we will call it function by passing an argument. So first, let me create a function. It is the name of the place marker. So whenever you click on by using a mouse are whenever you there pinch on a certain Google map in android or iPhone touch. Okay, Something like touch. So it will display a marker. So here in this function, I am going to create a marker, and it is going to be an object of market is starting the noon dot google dot map maps, dark truth marker, Onda. And here I'm going to create an anonymous type. So the position is going to the position off a map that is coming way will call this form click function. This is what this is our first argument and second is the map, and no here. As you can see, you need to change this marker because it's the anonymous Intertype. So it's comes under this bracket and here's something like this and ended with Simon Kahlan . And now, whenever you click on a map, what is When do we have on your map? Will be panto So you need to call a Mattered off a map object That is a panto. This particular marker on Dhere eso how you can call this matter. So we were going to call this matter on a even listener. So a pen to put sensory So it will plan to this position and here we will call it event. There's a google dot map start even start add listener this map and 2nd 1 is click. So this is the event. Lots of events are available. The basic the click event it is a mouse click are the touch when you touch on a map and here we call a matter that is the name is Please marker. And here we will part the petition off a map on and the 2nd 1 Okay, the longer to gratitude. So e dark led LNG is the variable is a function that we were going to call from the event E on. The 2nd 1 is map argument. And now for doing this, Uh, you just need to call, I think is a function is going to be called by this listener Onda and we're mad will depend to this particular position. 6. Display Marker on Mouse click on Particular Location: no honest title runner application on Let's see whether it's working or not whenever you click on a map, Whether the markers appear are not. So. As you can see out here, we have mirrors that says the undefined, not a function onda. And it says we're using a function name and even listener. So I think there is some stick over here. So, uh, really to use Air Listener And here we have, um, argument, as in a place marker function. So, no, let's run this application once again. After changing that undefined function toe our listener No, no Lawless. Let's okay, when you click on it, it will please a marker on click ready. But you click on the map so as he considers how quite easy. Just, uh, adding a listener that is egg listener on calling a function from that listener, you can easily pass the argument on. You can have this type of output. Now you can use this particular map in your application. It's quite simple unity. You just need to use our listener with the matter name or a function in place marker with two argument petition and man so tense or watching this tutorial haven't actually 7. Practical Placing Markers from input type select: Mullah, try to create a simple application. In this application, we will select a particular name a location from the select means from the top for town menu off the select tag on de Whenever you select a popular option from this select element from any one of these options, it will display a marker on that particular location. So in this way you will be able to know how you can pass, how you can call it JavaScript function from from selecting any inputs from the estimate attacks. So, as you can see in this example, I have the select tag Here's you couldn't see I have selected on this electric. The idea of this electric is location on when it was on change. Whenever you change options, it will call a function. That name is location change, and it contains four options with the different values. The first values values zero. That means it asks you to select on. The rest of the values contained the latitude and longitude for here. As you can see, India Gate has some longer to let it latitude and longitude. Similarly, the Todd Mel on the tired one scientist to us these old three are the famous places here in India, and we know the idea off map is map Can waas so on location change So whenever on location . So here we know we have initialize functions that contained a map options with room or four and a center off a particular only too delighted to on. Basically, this is a longing to let it off India and we have a map options in a map object. Andi, let's see and we have a dog listener. So whenever when the load it will initialize that function on the map will be loaded or in that particular center position off India. And whenever you change the options, it will call a location change function. And here we have a variable that says along with a latitude and longitude LNG led an LNG and current location means it will display the current location. So here I have a variable name, well decked. Ah, good. The value from the get element by i d. And by using a very well hello. See, you can use the well function options are it will retrieve you the current value selected value and we will use a JavaScript function that will split the longer journal attitude by using separated by comma. And in this way we will have a locality and LNG from zero position first position. And then we will select the current location by creating object off. See, you see, you are Loc Onda. We know the map options are we have something like this on Bond and we have a marker also available over here and in the marker. What we're passing, we're passing the current location and the position attribute on the current map. So, as you consider, is quite simple. You can create your own application like this with different locations on. You can also connect this location from databases fresh from the database on You could do the same. So your lips on this application. So when you run this application, it is the ultimate closers on just the 1st 1 to the first, that thing comes here. They are longitudinal edited off India. So this is basically longer to let it of India and no last minute like select India gate from here. As you can see, the ah locus engine function will call on all the cold. Really. According a court will execute and it will please marker on that particular day. Similarly, for a scientist to bus 8. Basic Map Type Example: but aside, run the basic Mac types available in Google map ups. So these are of four types road map, satellite hybrid and Terran. So ah, we were going toe Learn this concept by implementing this court means this map type in our last application. So in this applications first, let me remove this. Let's make this map on dmapub options on Do Okay. This map options as a onda map as a global bill variable. So because what exactly I'm going to do here? I'm going to create one more select tag I provided input off for for for three or four up four options off the friend basic types. And we will select the different maps from the select tag Onda. We will try toe change the type of map while selecting the select techniques options from selected. So here, as you can see, we have only adamancy here. Uh, we have only three are different options available from India Onda and here we were not able to see that the French map type. So what exactly I'm going to do? I'm going to create one more options on the select tag on DFO um there will be able to select the different map types alike. So tensile watching 9. Basic Map Type Example cont: No, let's continue last example. To set a map, you can use a function set map type Heidi for a particular value. So here, I'm going to use one morsel attack on in this sort of attack. I will use idea. Next is a map type Andaman chain dysfunction toe. Let's see the map take it is a map. They function. And so and hear from the options just changes value to the different numerical one so that we can use if else condition. So here the 1st 1 is zero than one, then two and then three. And here we will past the text off little different map date. So here, for the 1st 0 I will select a let's see the map type off road map. And for the 2nd 1 I was like satellite 3rd 1 I will select hybrid. And for the last one, I will select to read. Okay, so of animal, he was click select Any one of those options from the selector. Our tag. Okay, so it will call a function. That name is a map type. So he had This is my function that's is a map type. And in this map type. Let's exit of some quarter. Okay. You're right. We are in this map type. I will. Okay. Transiting If let have this will copy this. Court 100 means it will select the I d on do here. The value the first phone got element by idea is the idea Here is a map type on. The 2nd 1 is a look Variable loc and I would change location, toe type, variable to type. And here, whenever user click on a map, this function will be called and it will select the selected value from the well on if our type is equal to zero. So we will call a method off map. That schism site Mac type has gone to see out here. This is the set map type i d. I will copy this function and placed it here on day as we know and lets the copy and paste it four time. Okay. And just changed the values. The conditional statement here. The 1st 1 is the zero. Second one is one okay for zero. We have a road map and this is 12 and then three on a change. This one to rent toe award map on, then. Satellite on, then hybrid on the last one is to it. Okay. All right. So whenever you click anyone off this options, it will change the type off a map. And we have a listener. Also on load Hong Chandor's add dome Listener. Andi, let's run this application the latest tested, whether it's working or not. So this is my roadmap. All right, let's check for check for the 2nd 1 Yes, I delight. Yes, walking. So in this way, you can also have their own buttons instead of having the buttons from the Wilmette GPS so you can and you can, please. This wouldn't anywhere on the map. And here, the India gate. All right, on. But the map has been changed. Toe the different one on because so what exactly I'm going to do? I'm going to add some additional court. Okay, the 1st 1 here, I will put the minus one. So if something is minus one and I think should be happened, it is select on. If you want to add if conditions, you can add it. And if you didn't want in, that is not going to be executed. All right. And what a second thing I'm going to do. Okay, We contestant application in the last example and the next tutorial. So times were watching it. Have a nice day. 10. Global and local map variables: Let's finish this example by fixing one Iraq. Actually not. It's not an area. We already have a map object. Andi and Ah, I have created this map object and map options as a global are variable. So that's why I have deleted. And that's why it's not making an effect. So when, after leading it like McCollum, 1/3 off a map that sets that center to the current location. And now you can run your application because here the map is now treated as a global variable, so it will give you desire result. So, no, it's my art put. And here, on a change the location, it will give me this particular holy. So this is how you can use a marker of animals that click on it and you continue the map type on and by just making some changes in your code tensile washing, historial 11. Rotate Map to 45 Degree Imaginary: and no, let's see how you can enable or disable the killed. So this is something like imaginary map, which contracted your map toe up to 45 degree imaginary. So here you can see this example. Andi. Let's see how you can do it. You can do it by art. It is ultimately enabling and disabling off 45 degree imaginary, and you need to use a matter name off, man, that is, notice that tilt. So here I'm going to use the same method so there's no map object and let's use said Zoom toe different level to 14 Aun said. Tilt to 45. That is a degree. So just watching you won't have to attribute means just for calling one my third off a map object. You can accomplish this. So it was from your application on like me have a So at this map from Button and that's have somebody will point. And as you can see no, its look like something like a 45 degree imaginary. So this is how you can change the map by using a stilt tens of watching this tutorial 12. Sign in to Google Map With GMAIL Account: No, just take about. Talk about assigning map. Sanya map means you can logging into a Google map by using your Google account. So bite. If you do this, it will Google Mabel's and you'd adaptation off your data are the proposal from which you Lachlan So it will just send you all the information. So it's quite simple to sign in a Google map. Just you need to use a two para meters person on the sign underscore in a tribute. So let me show you how you can do it. You just need to add this to perimeter. That is worse than on 2nd 1 The sign and the score in just like this value very well to true. So here, let me add just two attributes variables perimeters here, over. So here that wasn't I'm going to use experimental wasn't three dot e XP on the second perimeter. I'm going to use a signed underscore in and let me make it toe true on after doing this, when you run your application when used to save your application and this run it, you will see your Google account picture at the right side top right Automat on But while doing this, what is going to happen? It will send you the data. Where never you logged into the map. Andi, It will send you the optician off your data. So let's run it on. As you can see out at the top, right corner here where I have my Google account. I called Thanks for watching the tutorial. Have a nice day. 13. Testing Google Signed Map in Android Device: when you make your Google makes maps, signing some changes to map controls has been happened. Zoom pan map, type, street view rooted are changed toe the periods off. This all changed changed when the signing is unable. So zoom on, Appear on the left, right, left corner and all these other a pretty incident It has been going to be made. Well, let's title run the signing map in the android emulator are in and are device. So here I'm going to run it. You will see the changes in android emulator also, or a an end of the smartphone or in any smartphone. When you run your Google map with sign in your account Gmail account will we appear on the top right corner. So, as you can see out here, if you are not signed in, it will ask you. It will just give you a Google G plus I sine in a blue color Andi conflict on it, and you can make a log in. So it's quite simple toe work with Google map. You can have a Google map, but signing so that you can have the data means we're whenever you log in a Google map of whenever you open a Google map. But they signed in map. You will get a notification. Your email that you loved in from a smartphone or you looking from a mobile for you have logging from a particular device are from a popular poser. So, as you can see, these data are very helpful as a collection if you're creating some good application. So as you can see opiate in this application, I'm just trying to run my map in entered. Emily, go. You can also run this map directly on your android device by having a USB type of interface . So as you can see, Venice Map Lords, it takes time. Because so whenever this map load, what is going to be happened after the map? A lot has been done. Yeah, it will show you the sign and Gmail signing. So in this way, you can have signed in Web tensile watching this tutorial 14. Testing Google Map Sign in and Android: Now let's complete the last example off signing map and and or device. Just click consigning, you know, and otherwise it will automatically open. Prompt are Jimmy logging account and just provide here your user name and password. So let me have your my user name and password on Just make a sign it. So in this way you can create Google map application that has a signing functionality, and you can take your data in your Gmail account wherever you log in, wherever, whatever browser you use first time and you can have your Dida. So this is how you can see Google map. It's what easy to work with the deck stop on their smartphones and mobile application. 10 for watching the student todo. 15. Save to Google Map with Info Window: Let's see how we can save Google. Google Mad Rettendon for window. So it is also known as a marker. That means how we can create marker and a Google map. So we will discuss about it here. So this is the basic simple code available in the developer off Google mapped developers given by us. So here, as we know in the example, these are the map options Onda. And it's quite simple to use it like me. Forced to just make a simple change on this change is that I'm just going to change the zoom level to see the 17 Onda. Ah, let's see the longitude and latitude. So here is my longer did and let it you okay, you can use your own whatever longer and let it did you want and the simple thing here that we need to do. Okay, let me disclose this one. So here to work with a marker. The simple concept over here is toe create an object off Marco. So this is whole bunch, of course available and hear what I'm going to do. I'm going to add a marker. So like me, this is the map. Variable map object, Onda and what I'm going to do out here. I'm going to add a marker, so it's quite simple here. Let create a info window variable in for window, and here you can use an object off google dot maps dot in full window. And whenever you click on that particular influence in for window, it will show you your information. And let's have a market first. Glad you could use an object of marker by using a market mutter, and whenever user click on a marker, it will display in for window. So in the market, let's have an attribute off your map. Onda Place off location. So here you can use a attribute place, and in this place you can add travel use like a location. So where exactly the location and the 2nd 1 comes that place. So this is the place of anybody that click on the market. It will had this place. Basically, it's a location off Google Sydney headquarter Onda. The last 100 I'm going toe use here. The info window. You can also add the attribution. Whenever you click, you can move toe this particular source that is the Web. You are on . We have a map here. Andi, please. Over here, Onda. And no, The location is the place where the market has been going to show onto something like this . I'm just missing some Collaborates is over here. And after doing this in let's have info window, I already have it, But let me declare it once again. So now in for window, you conclude an objective. And for window that is google dot map, start and for window. And here in the sinful window, you can call a I met her. You can get a content that is going to display with this and for window. And after this, let's have the listener for a marker at a listener. And what the event, even this clicks of anybody with a kick on it marker. It will call a function and X is the info window Got open marker and for window Doctor, open what we need to open here. We were going to open a map, but a particular market and we already defined with the particular map. So now you can, after doing this, just savor application and just my my options and some control. It's complete and so in for window object open window and is the marker on. And it's please. And this is a listener that I have added over here and now simply learned this file and I'm going to run this on my militar on Brought him later. Let's wait for the output so we will continue this in the next. Listen, we will see the output in the last A next lesson stands or watching this tutorial. Have a nice time. 16. Info Window Output: just try to correct the error in the last application off for window here, The unities of Kratie Andi after this is the particular attribute that you need to use with a marker and a place attribute with key value Are ready. Ondas Mike ready? And after doing this Ah, let's run this application once again. So this my entered emulator Onda like me, run it once again, right click and on fire, and it's great for the output, so it's quite simple to sure. In for window, you need to create an object off the end for window from the google dot Mad brought in for window on in the marker. You can please your map attribute and the place off location with the query and here as you can see the output. So let's wait it. It will take time to load. And here is my marker on. When it clicked on the smart car it will display, it will open a in for window on. As you can see, it says saved toe Google map. When you save it, it will be available when you once again logging into your map and it display a massive Google Sydney. So this is how you can use in for window 17. Add a Marker to Map: In this tutorial, we will talk about how to wear the marker in your man. So it's quite simple to add a marker. Just you need to create an object of marker from a class. That name is Marker. So I'm going to add this court that constant er the Google that matched our marker. And here, like me, I'd school in my markers daughter s TML pitch. So this is my new page. Actually, it's a sign in the school, Matt, I'm just going to meditate. So let me create a variable or an object that is not a marker and packages google dot maps , dart marker. And here I'm going to act some attribute. So let's add some attribute with the cable. If Pierre So here's the 1st 1 position. 2nd 1 is map and started in the title. So let me add a map over here. As we know here we have a map and a title, so map Onda and the map is the map object. Andi, 2nd 1 of the title. So let me have a title that says the hello world on my map. Andi, if you run this file, you will see a difference that you will not find a marker on the map because, uh, we're not putting a position over here, because when what attribute remains, that says the positions. And that is what exactly required. And let me run this output in my entered emulator so it would not show you any marker option here. So let's try Toe added this particular application by adding a position marker. So let me in the position. That's the position on board. You can take a longer to the latitude. So let me put a long into the latitude over here on Ben. Even it on. Just make right click and on the oil. So here, basically, we're passing individual variables and we need toe. So your destiny let me change this. Ah, is tile width and height for the text up 200%. Andi, second thing that I'm going to do out here, I'm going to create a separate object off the location. So it's a my ality and LNG on. Now you can use an object off a Google, got maps. Start to the L. A. T and LNG object instructor you can call, so it's ality LNG. And here I'm going to pass a longer tube and let it do. There is a first come the latitude and second is the longer tune. It's quite simple. A Z can see despising the latitude and longitude. And then what I'm going to do, I'm going toe Put this variable with the map options and with a marker on Dhere in my map options, I will change the center with this particular any slide variable that is a map l et LNG on the last thing. I'm going to do it. I'm going to change the same here in a marker. So my charity and lng enough for doing this. Just run your application. So as you can see here, No, we have a marker at this particular longitude and latitude on gun. Check it to contain the zoom and then done it. It's in Australia with this particle latitude and longer too. So this is how you can place a marker by this simple creating an object of marker of three . A tribute to the position map and title on Remember the title? A sorry. The position is always quite and also you can call a method off a marker object instead off for individually placing the attribute Over here, you can call a method that says market or set map here second abortions, and when you run it, you will get the same our output. So tens of watching the struggle have a nice time. 18. Removing a Marker: Removing your marker from a map is quite easy. You just need to call a method of market, and it's a site map to note it will remove your marker from a map. Tens of watching this tutorial. Have a nice time. 19. Animate a Marker: an image, a marker. So let's see how you can animate a marker. So basically you can animate a market. The drop or bombs. Two types of any missions are available, so here, toe anybody marker. You can use a attribute off marker object that is the animation Andi. It's comes into a Google's Dot maps, not any mission DOT drop and let's take an example. The same example. The to very builds off longitude and latitude that is the stock home on Parliament and a micro object. So I'm going to do the same here in my example and a function in his initialized. I will just to change this my latitude and longitude to the different, longer convey attitude with the Stockholm and Parliament like this selects created variables office, talk home and parliament on a market and change the map options to Stockholm Onda and I'm going to change Zoom to 13. You can use any number but being the 0 to 18 and here in my marker, let me add the attributes that is the trackable true on position on all. So let me have a map, Onda and, like move, delete this map. Okay, All the same you can use either one I'm making here and in its allies. You can also do it. Keep it as a global variable. So let trackable to truth. We just need to make some changes to the marker. And here the position that I'm going to make it here. That's the Parliament. So whenever you click on the market, it will just have Parliament. Ah, but a No. Let's not this application. And let's see whether it's working fine in Northern water. If you have we have met, we have had a mistake or not. Okay, it's not working. So let me see what exactly the problem with this court. It's very difficult to find the problem and the correct code in case off JavaScript. So let me check it out. Yes. Ah, map options is exactly fine. It can't incentive stock home on a zoom off. 13 Court is right, Andi Now the map object is also almost correct. And here in Mom occur Let me at any mission. Perimeter of attributes, his maps. Okay, It's not a maps, it's the google dot maps dot animation, and you can have the dropper bounce. So I'm using a drop. Let me run it Still, it's not working. I think I have made some mystique over here, so let me check it out. Scored is a perfectly fine, Okay? Actually, you cannot use this position. Attribute off market two times. So on the older. And also we didn't have a mile long and latitude variable off long, let it in object. So let me delete it on and make it to the Parliament's or know the code is correct. And here in the map options. Once again, I will change it to stock home. And when I run this application and when I on run this application, it will show you a marker here in a drop more. And also you can read this marker anywhere and let me add a function that is bountiful function. So whenever they use a kick on a map, it will bounce. So here are for this. I'm going toe. Add this listener on dysfunction and if the market is get, animation is not tickle to know that is the and if animation is not know served an emission tonal and then please the any mission here. Then see if it is not equal to know that, said the animation to know if it's no. Then said the animation toe the bones. Andi from the Insel eyes Let me call this function by using a event. So event here I'm going to add a listener that is even to the click with a marker for the market. I'm going to add useless stuff and if speak event, hang sometime. So I usually just like example in the mile. The next lesson. Sensor washing tutorial. 20. Adding Bounce Function to Marker: Let's continue the last application. And here let me add a click event on call a matter. Toggle bones Onda. After doing this, what you need to do you need to make you are variables that is a stock home on Parliament and marker on Global because we were going to call a function from its allies. That means it should be available outside dysfunction, so make it global. Andi offer doing this now you condone your application. So as you can see, it's an output. We have a marker Onda and left it on. It would be Let me refresh my browser. Okay, now it's a drop effect, and when I click on it, it will just simply bounce. So this is how you can provide any mission to your marker. And it's quite simple toward with a Google map. JavaScript ap I because all the documentation has been provided by the Google back developers, and here we can utilize this matters so tensile watching Institute will have a nice time 21. Adding Simple Icons: how to please a marker Bitty images. So it's quite simple you can use. You can create the object of image by using Google maps. Start mark your image and here this is my variable image, So I will cop. It's cold over here in the last example, and it contains a You are, and that means part toe the meat. It can be a rev image, or it can be somewhere in your project folder. Andi. I have image in my image folder off my webpage That is the in a images folder. And if image File Name is and Drug P and G and the size of the image means the false eyes, the origin is from 00 Anchor Point will be from 17 on 34 on the skill size means the original size. Often image will be 25 25. So let I mean slept on this application and sweet food output. So here, as you can see, the mid size is 25 2500. Click on it. It will. It'll bounce on. Let me change the image on. You need to use a icon marker. I mean, you need to use iconic to boot in a marker and he looked Matina size toe 100 100. And if you do this, it will. Distant doesn't affect it because it just a default one you need to change Make change here in the skill size So here I will make 200 and 100 remember you need to add this image in the icon Attribute off market So this is how you can use that image So tense washing this tutorial. Have a nice time. 22. Make a Draggble Marker: making your market regularly is quite easy. You just need to use a one attribute. That name is trackable on its the bullion value If you make it false, marketable nor dread. If you make a true marketable drink here in my market, I'm going to make it a trackable. So just I just attribute drinkable true and then simply than your application You will see a perfect like this potential wash industrial Have a nice time. 23. Marking Polylines: sheep's you can in different kinds of shapes were in your Google maps, and these are the holy line. Polygon rectangle circles and user defined user creditable user can also edit it. So here, let's talk about the different shapes available in the Google maps. API. So these are the poly lines. You can add a poly lines. That means you can create lines. You can mark the lines from one coordinate toe, another Cordy neck, so create a party lines you need to use the constructor party lines. Onda and some options are available regarding the poly lines on these are the pollens options. Did it apart to you risk on all. And you can also add a color this stroke color. You can set the Kurt with a friend by a visible as Tamil code. You can read it. You can change the opacity. So let me create the same example here in the application. So this is the flight coordinate, and it contains four corden X. So I will copy this quarter and placed it somewhere here in my court. So here, in any slides method, I'm going to copy and paste it, so just paste it here. It contains four coordinates. So we were going to draw a line of Polly line. But being discord in it, is it something apart from one coordinate to another? Coordinate on for this unit to use the object means the constructor object by using conceptual are ality lng longer to get a little Let it longer look longitude and check in comes the flag pat. So here you can use the google dot maps Doctor Poly lines. It's Polly line constructor, And then you can add a Poland options within it. So let me add the pollen options. So this is the part Judas stroke Color is took capacity and stop. Wait. So let me copy all this stroke level Defined the color opacity contain the opacity. You can have a weight over here on now. You can simply call a method off like pot. It is a poly line pot, A method of Poland part this party line object. So that meals it. Yeah, right. Pat dot Set map. So this is a very common matter. We're already going to go into this matter. Said map the map. So said this right back to the map. Andi, Now you can simply run your application. So, as you can see, you just need it. Some coordinates. You need a flight, you need to pull in. And options that is shape options and a constructor here. We're using a poly line so you can use a portal and constructor with pollen options and not a simple. In this application, you will see the desert off. Been to corniness. We're doing all this coordinates inventory line. I'm not sticking sometimes. So Okay, Now, let's see the output. Okay? Somewhere, because we haven't given a center coordinates somewhere, so let me minimize my map. Okay, So this is the poly line or collect. Resume it on. This is the pollen we've been to enter. Thanks for watching this tutorial. Have a nice time. 24. Inspecting a Polyline: Inspector Polly like So let's see how you can retrieve the longitude latitude. That is how you can get a particular longitude latitude and you can insert a particular longer to credited on a based on a holy light. So you're never going to draw a poly line whenever Reeves a click on a particular coordinate. So these are the portal and options, and the 2nd 1 we're going to add a listener. It is we're going to call a function that will have have a very well part, and it will collect that part and rope pulley line between two parts or two or more parts. So here, let me changes flight path variable from local to global On. Also, let me add a map So I will make this map to global. All right. No, I have a map and have a variable. Let me get this part because we were going to go to her apartment, but he was a kick on it. And here let me add a event. So Google, Dr Maps, daughter event dot event listener, and here I'm going to add a click listener on the map have exclude listener on Let's call a function that function name is add L A t LNG and let's define this function. So here we have a function, and here we're going to do We're going to call a mattered cat at means cattle occasion at whenever you click on a map so that define a variable and collect the longer to the latitude by simply calling a matter So where, Pat And here, let's see Polly or here it's a name with file path dot Get at. Okay, get pot. A better name will get pardoned. Post the part. Andi, when you call this method, it will post that part means it will drip all Polly line starting from this pot and pushed the lovely reality LNG on no new concrete marker And add this part to the marker. Here is a very marker new google dot map start marker on X, A marker options. So let me have this market options first from the position and position is the even dot ality lng on the 2nd 1 The title even give it a title Waterworks So I'm with is going toe Uncle Bill ality and LNG get lent off the holiday at a village could get lent on the tiger to, but I'm going to put here is the map. So this is my map. And when you take on a map is will it will through a poly line. So let's run this application on its a very wonderful application. You will see the difference. This is the 1st 1 It will draw a line from here to there. This one. And once again, this one. So this is how you can mark a longer to the latitude wide trying a poorly lights. Also, you condone any ship. But just using this some common methods available in cool man. So thanks for watching this tutorial. Hope you enjoy it. Andi, have a nice day. 25. Marking a Polygon: Let's see how we can add a polygon. Polygon are basically a clue saved. It can be triangle. It can be a rectangle. So here Ah, this is the example. It I'm going to take it does I'm going to make some changes because he had just required to change object. So here are this commented. I will do it directly. Andi, like me, changes Polly line to polygon. That's all the thing that you need to do. Andi. Second most thing that I'm going to do out here, I'm going to add a path. And Pat is now here A flight path planned coordinates because here we're not using any events, listeners. Andi know when you run your application, it will show you a different output. It will change to the policy on shape, close, close to shape, as you can see out here. And a change in June 22 because it's looking a little bit big on if you want to change some of the attributes off the polygon, as you can see how terrible activity, stroke color, capacity, stroke, weight, full color, and fill up a city. So I'm going to change all of this attribute copy and paste it here on. Now you can run your application, and then you can also check it. And you know the best. All this at reviewed with the different values here. I'm going. I'm using the default from the Google and not see the output. So this is how you can use a polygon Polly line on any shape just by changing the object. So now let's see this. This is how it looked like. Now. Thanks for watching this tutorial. Have a nice time. 26. Add a Ground Overlay: Let's see how you can add a ground overly on her map that Mr Can overly an image on a map. So you need to create a constructor, our ground overlay, and you can use a allergy LNG pound. So, as you can see out here, let me added image that amid name ist Osma her from India. One of the wonder on here I'm going toe do the same. And this is my variable historical overly and I've killed it. A story good over later, his object of ground overland it contained made the tired male and it contained image bombs . So the image bombs are the longer to the latitude here, as you can see on just my immediate and here and image bounds contains the longer to the latitude where the image should be bounded toe means it was something like a size Andi longitude and latitude with wit and size. And this is the longer the latitude upped. Asmal in India. Andi Uh, no. You could add at this ground over later that historical overlay to the map by calling a matter name site map Onda Simple. In application, you will see the difference that you have a particular image on a particular location, but mitt, pound, disquiet and ground overly object. So how is quite easy to do it? Go through this tutorial, Andi. Try to build a single application with our on our on your choice. And if you want to remove overlays, you can simply calling my third. It is said the called moderates that map to the tens of watching Tito to talk to you.