Learn Google Maps JavaScript API (Beginners Tutorial) | JavaScript Project #7

hello everyone my name is ashish and you're watching andhra youtube channel and in this video we are going to learn about the google maps api so without wasting any time let's get started if you have not yet subscribed to our channel please hit the subscribe button and also the notification bell icon so that you don't miss any of our videos let me first give you a brief overview of the video we will learn how to use the maps api how to add various type of markers how to add a pop-up box how to set the zoom level etc as usual i am using the vs code text editor with the live server extension so now let's start first let's open a new tab and in the search box we'll write google maps api here we'll click on the google maps platform google developers link and we will be able to see this page here we will click the maps javascript api you will come on this page and here you can see the message that before you start using the maps javascript api you need a project with billing account and the maps javascript api enabled so what is a billing account it is nothing but a regular google account with your billing process setup that is basically your payment methods set up now how to enable the maps javascript api let's see that for that we'll click on this go to console button and then you will reach on this page so here they say to enable apis or to set up billing will guide you through a few tasks so enter the project name here i'll say my maps project and click on create after that you will come on to this billing accounts page where you have to set your billing account or if you don't have it you can create one after that you will be directed to this page and here you have to select the products and we'll click on maps now remember that everything we are doing here is absolutely free of course there is no charges for it you just need to add the billing but you will not be charged anything so i selected the maps option and i'll click on next and then you can see we have got a message saying enable google maps platform so we'll click on enable and then you can see we have got our api key you can either copy this api key and keep it somewhere or otherwise you can just click on done and then if you want to see the api key you have to click on this hamburger menu now here you have to go to apis and services and then you have to go to credentials and you can see that our api key is here so whenever you need it you can copy it from here now let's come back to our api documentation so if you scroll down you can see that they have given a simple example how to implement the google maps api we'll copy and paste the code from there so we'll click on the html tab and from here we will copy this complete code and we'll paste it here now let's try to understand this code the first script we have is the polyfill.js so the polyfill.js is the library used to add support and functionality for older browsers here this is a tutorial and not an actual project so we don't need the script right now so i'm going to delete it next we have the script tag which contains the source for the google maps api and here we have to provide our api key at this location so where can we find our api key we can find that in the credentials so let's go to the credentials tab in the google console and here you can see this is our api key so we'll copy this and we'll paste it here this is because we have put the script in the head section so this will by adding the default keyword it will not block the code and only when the html is passed completely this script will run next you can see we have a link tag to our style.css file so we have to amend the path and that is it next we have another script tag which is to our local javascript file and the name of the local javascript file is script.js so we'll change this to script.js and we'll also move this script tag down after the body element because we want our script tag to load at the end and that's it now inside the body element we have a div having the id of map this is the div where our map will be generated so now let's click on the go live button so that we can see all the changes in the browser of course you can't see anything here right now because we haven't added anything to our script.js file or to our css file so for that now let's continue with the google maps documentation here we have added the html section now let's come over to the css tab and let's copy this code and we'll paste the and we'll paste this in style.css file now let's click on the javascript tab and we will copy this and we'll paste this in our script.js file now if we see this on our browser you can see that the map is loaded now let's add some styling you can see in the style.css that since we have set the height to 100 that's why it is covering the complete height i'll reduce this to 80. you can see that this piece of code is marked optional so we'll remove this for now because i want to add my own styling now i'll add a width here of 80 and above this map div will also add a body tag and here we'll give it a width of 100 viewport width and we'll give it a height of 100 viewport height and we'll also add a margin of auto to the div having an id of map so here i'll say auto so that our map is in the center we can increase the weight to 90 obviously there is a material and here i'll also add a h1 tag just to show what i'm doing so we'll say google map api we can add a hr tag also and that's it so now let's see what we are doing in the script.js file here we have created a variable map and we have called a function init map now what is this init map function let me show you here when we were calling the google maps api you can see that we are using a callback named init map so this is the init map function which we are calling so here inside this function we have this map variable and we have set its value equal to the new map object and inside the parameters we have to pass three important things firstly the dom element where the map is going to be rendered so you can see that we have targeted the div having the id of map and then we have to pass two more parameters that is the center and the zoom level so this map here refers to the then having the idea of map where the map is being rendered so if you want to change this to some other id say suppose map one we have to change this to map one here as well and the same in the css file and you can see that we will get the same result now if you come on the center let's set the center to something else so for that if you want to set the center to your current location you can either use the geolocation api which we saw in the last video or what you can do is search from some other coordinate so let's say if we search for the coordinates of delhi if we say coordinates of delhi and let's see what we get so we have 28.70 and 77.10 so let's provide this here and the latitude will provide 28.70 and in the longitude let's provide 77 and you can see here the map is now centered at delhi next is the zoom level that is you can set it to 8 or you can set it to probably say 10 or you can zoom out by saying six so this is how you can set the zoom level if you want a guide on the zoom level you can scroll down in the documentation and here you will find that here the zoom level one is world the five is land mass or continent 10 is the city 15 is the streets and 20 is the buildings so these were the compulsory parameters which we need to provide to display a simple map now let's see how we can add some markers and do some other cool stuff with our map now to create a new marker we will go into our initmap function and inside this we'll say new google dot maps dot marker and inside this we will we have to specify some properties that is firstly we'll specify the position of the marker so for that we'll say position and we want to specify the marker at this particular location so we'll copy this and we'll paste it here next we have to specify the map on which we want to specify the marker here we only have one map that is defined by the map variable so we'll say map and that is map and you can see that we have created this simple marker now let's see what are what other options we can add to this marker we can create a label on this marker so i'll say label and if i specify say a so you can see that this label is added here now we can also add a title new delhi now if you hover over this marker we can see new delhi next what we can do is we can set a draggable property so we'll say draggable to true if we set the draggable property to true we will be able to drag this marker and place it anywhere of course we don't want it right now so i'll set it to false next we can also add a animation to the marker so for that we'll say animation and we can say google dot maps dot animation dot drop and you can see that how we are getting this drop animation we can also add a bounce animation to it so if i say bounce you can see how we are getting this bounce animation let's set it back to drop one thing which i forgot to show you that apart from the center and zoom you can also specify a map type id which is optional property so i can say map type id and here we can say suppose satellite so in that case we will get a satellite map of the area similarly we can also set it to terrain and then we'll get a terrain map so you can use these options as well next what we can do is put a custom marker in place of this default marker provided by google so for that we will use the icon property so i'll say icon and let me show you in my file structure i have this map.png i have this image already saved in my file so you can have an image which is locally saved on your machine or somewhere on the cloud now i'll use the address part of this image so i'll say i can and since this image in the same folder of my project file so i'll say map dot png and you can see we have got the new marker now let's see how we can create an info window over these markers for that we will use the info window class so let's make a new variable i'll say info window and we'll set its value equal to new google dot maps dot info window so this info window class allows us to create information windows over the markers and inside this we have to pass the parameter as content string so what content you want to place so i say content and here i'll say this is an info window also let's store this marker into a new variable so i'll say const marker equal to this now let's access this info window variable so i'll say info window dot open and inside this will pass two things first the map on which you want to place the info window and second the marker on which the info window will be placed and you can see this is how we can place the info window over our marker so these are the basic things which you can do with the google maps this is how you can integrate the map into your website and place some custom markers and information window now if you want to learn more about these things and if you want to experiment more you can go back to the maps documentation and here if you scroll down you have a link to reference implementation click here and here you will be directed to this page on this page click on samples and here you can see you have a lot of other tutorials on what you can do with the google maps api so you can add markers remove markers you can make custom pop-ups you can do a lot many other things as per your requirements that's all for this video please hit the like button if you learned something if you're new here consider subscribing see you in the next video till then take care bye bye

Channel: Another Web Guy

Views: 4,914

Keywords: web development tutorials, html tutorials, website tutorial, css tutorial, javascript tutorial, google maps api, google maps, google maps api tutorial, google maps javascript api tutorial 2020, google maps javascript api, javascript api tutorial for beginners, javascript api project, javascript api tutorial, javascript api project tutorial, google maps api tutorial javascript

Id: 2LvwNMgW4vw

Length: 15min 11sec (911 seconds)

Published: Wed Aug 05 2020