Javascript Google Map Directions API & Places API Project🔥 - [2021] | Google Map Javascript Tutorial

welcome back to another youtube video guys it's your boy sam and today's video yeah we're going to be continuing our google map api and today's video we're focusing on the distance api and what we're going to do is what you're seeing right here so we have an origin and a destination and it's going to basically calculate the miles that it takes to go from our origin to our destination and it's also going to calculate the time the duration it's going to take to go from point a to point b so let me just give you an example i put las vegas here and i also put new york here and we click on the button right here and you can see it shows us point a to point b it says from las vegas usa to new york usa driving distance exactly but i'll show you how you can change this driving distance to walking distance to bicycling or cycling distance and yeah that's the cool part of this tutorial is that you will be able to switch it to wherever you want it to be and it also shows the duration so it takes one day and 13 hours to drive from las vegas to new york i bet you didn't know that but yeah we just created an app that actually told us that of course we're using the google api the distance api for this project and yeah if you like this kind of tutorial and you're new to this channel subscribe to the channel i release content like this i'm doing actually a series on all the map api from google because i find it really cool it's really interesting and there's so much cool stuff you can do with this and if you actually choose like new york too alicante and we click on there that's really impossible because you can't drive from new york to alicante so we also have an error message that is going to show up and this error message is basically saying could not retrieve driving distance so this is the two parts because if it's not possible we want to have a message that's actually going to tell you that hey even though you should know but it's going to tell you hey you cannot drive from new york to spain yeah subscribe to the channel like the vid i am really excited so let's get to it yeah so the first thing you need to do is you need to come to this place right here and if you don't have an account just create an account you need to go to console.cloud.google.com now when you have your google cloud platform and your page is as identical as mine is so it's the same as my page what you need to do next is you click right here and you create a new project give it a name i'll just call it new project but you should call it something better new project one and then we click on create and in this new project the next thing we need to do is we need to first actually going to the new project so we click on the new project and now you'll see right here we're on our new project we're not on an old project we're on the new project the next thing we need to do is we need to go to our library and we need to add some libraries into here so the first library we're going to add is distance distance matrix and i just want us to add everything because this is a ongoing tutorial it's a series i'm doing a whole series on google apis so we will need all these libraries so we enable it click enable and the dashboard we go to this place right apis and service and we click on the library again because we want to add additional libraries the next library we're going to add is direction direction api we click on that and we enable this too and we do the same thing again we go to apis and services libraries and we enable this to maps javascript api we need one more api this is the last one and this is places so you're right here places now you can see it places api click on that and we enabled it and now when you click right here you can see the api libraries that we enabled we enabled direction api we enabled distance matrix api we enabled maps javascript api and we also enabled places api when you've done this the next thing is we need to create an api key in our dashboard we go to apis and services and then we click on credentials now you can see that in our credential what we need to do next is we create credential we click right here and this is what we want to create we want to create an api key we click on create api key and now our api key has been created the next thing we do is we copy it right here you can see this restricted key right here we don't need to do that maybe later on when your app is fully finished and you want to restrict it to some website or some people you could do that but now we don't need to do that so we just close we copied our api and make sure you have this api key and it's the correct one so just copy it again to be sure and that's it now we're gonna do the html and the html i'll show you where you're gonna paste this api key because it's very important without this api key nothing is gonna work and later on in the video you might notice that your map has a watermark and it says only for developers mine is not going to have that because i already opened an account a billion accounts with google if yours has that all you need to do is open a billing account with google and if you put your particulars don't worry it's for free they're not going to take any money from you so when you open a billing account with google then that watermark will be gone and your map will look exactly like mine i'm just telling you this because it might not be the same as mine and i want you to know why now let's get to the html section of this video now let's look at our folder we can see this content right here and what this content has is our bootstrap.mini.css and as the name suggests it's for the bootstrap because we are using bootstrap in this project and the main reason we're using bootstrap is because i do not want to focus on styling i just want to be able to have something that looks okay so then we can go to the javascript and really understand what the javascript is all about and then we have our app.js index.html and style.css these are the files we use for this project now let's look at our head section of our html page and in our html file the head section you can see here we reference the content.bootstrap.mini so we'll link our file to this file right here and the second thing you can see here is that we have this font awesome and why we have that is because we're going to use font awesome icons because i preferred it to using just normal buttons they look better and yeah it just makes everything easier too because don't really need to style a button this link right here is for google fonts and then after that we have a link to our css so that's all that's in the head and now let's get to the html body and just fill in the body tags we're going to use for this project yeah so the first thing we're creating is a div and this div is going to be given the class jumbotron and the tron is with all and after that we'll have another day with a class of container dash fluid save that you can see the space right there and now we'll have our h1 tag and this h1 tag is just going to say find find the distance between two places save that now we can see our h1 and after the h1 we will have a p tag and this p tag is you can say whatever you want it to say i'm just trying to make this look a little bit nice so i'll say this app will help you calculate your traveling distance and if there's any spelling correction or spelling mistakes yeah you guys do it on your code for this one it really doesn't matter now we create a form and this form doesn't need an action because yeah we don't just need an action for this form and this form we're going to give it a class name and the class name is going to be form horizontal and now inside our form we'll have another div we'll give it the name of form group the class name of form group and inside this form group we'll have a label and our label what is this label for it's for from and you understand what i mean by from because basically what from is is going to be our origin that's the starting point so your distance you have from here two there so we'll have a from and we'll also have a two label and inside here we'll still have a class we'll give it the call xs2 and this are just bootstrap control label and i'm sure you're like where is the label well we need an icon for that because we're not using words we're going to use icon so you go to font awesome font awesome icons and the first icon we're having is a dot click on dots i want this one here you could also use that depending on what you prefer and yeah just copy the class the icon we just copy this right here click on it and it copies automatically and yeah we put it inside here save it and now we can see our icon it's white but yeah we can see it the next thing we need to do is we need to create another div and this div will give it a class of call xs for and this is going to house our input so the input type is going to be text the id not itim ref the id well what's happening here the id is going to be from that's the name of the id we'll give it a placeholder too and that's going to be origin save it nope not this save the page now we can see the origin and then it's going to have another it's going to have a class of form control i can see the styling changed that's what form control does and now we're done with the input and yep what i'm just going to do is copy this because now i want to do two yeah so we paste that here save it and we change the from to two change the marker and this is the marker we're going to use for the second part for the second input put that in save it because it's changed and yeah the id is going to be changed to 2 and also the placeholder is going to be destination and yup that's it so that's it for the form and the way we create the buttons we'll create a div i'll give it the class of coal xs offset 2. and i'm still going to add another class of i'm still going to add another class of call xs 10. inside this they will have a button but you could put whatever you want really doesn't why we're using a button is because we want to be able to add a function inside so an event so a button is like the best when it comes to adding events but that's why we're using that but the main the main thing is that i want you guys to understand that really this is me just trying my best to just put something real easy nothing too complicated so we can go to the javascript yeah i'll give it a class of button button info button lg and now we need an icon for this so go to the font awesome okay click this and get this direction icon copy it put it inside save it save it and now we get this the next thing is we're going to create another container fluid and this is just going to house our map now create another table give it the id of give it the id of google map and after that we'll have our output so create an id of output create a div with an id of output and yes so this div right here is going to house the information from our origin to the destination this div right here is going to be where we'll place our map and yeah that's it and this is it for the html really nice and simple save it you can see how it looks really basic nothing too special nothing too advanced just something we can have to actually show everything we want under the description you will see this whole script tag link and in this section where you see your key i want you to highlight it like i'm doing right now and then you paste your api key inside it and that's all you need to do for that make sure you also connect your html to your javascript i know it's a rookie mistake but yeah i just want to remind you and now it's time for the css the whole point of actually using bootstrap is that i don't want to do too much on the css so for the body what we're going to do is just for the body we'll add a color and we're using this code right here this light bluish color save that and also add our font family pop-ins and comma right here then send serve save here we can see it's changed the next thing we do is for the jumbotron wow for the jumbotron oh not you i don't know i'm calling john victron with you we'll give it a background of a background color of transparent and you see what's gonna happen save it you can see now it's white it's no more that grayish color i'll set the margin to zero and then we add the padding of 10 pixels i'm gonna copy this right here paste it and then put h1 in front of it and you know what i like the way the letters are spaced but you could add some letter spacing change the font size to 2m and the font weight to bold now i'm gonna copy this paste put a comma copy this again because i really don't want to write jumbotron again then the p i'm gonna say text align put in the center you can see that there p again for the p tag alone we just set the font size to 1m and all this you can do it how you want it to be yeah so now i'm going to leave this section but we're going to come back to it because we need to style the map when we create it but you know what i want us to create the map first before we do some styling on the css and the same for the output when we create the output then we'll come back to the css and actually do the styling for it so we can see it because if i just did the styling right now we wouldn't see anything because it's not there yet we have to make it into javascript so now we're done with the css for now and let's go to the html i have the js so now let's get to the app.js or the javascript your popup so now we're at the javascript and the first thing we're going to do and you know it's very important is add your comments so we set the map options and the first thing we're going to create is we're going to create a variable without latitude and longitude so i'm just say var my lat long and that's short for latitude and longitude make that equal to curly bracket a dictionary with key value pairs and the key is going to be lat and the value is going to be longitude and this is basically where the map is gonna start at because the world is big they can't just hold the whole world on one screen basically if that makes sense but what i'm trying to say is that right now we're setting where the map is gonna show up first on i'm setting it to spain because i live in spain you can set it to wherever you live it yeah so you can set it to wherever you live and if you want to set it you just go to google and you type where whatever location you can type space latitude and longitude you could type your state latitude and longitude and when the map shows up it's going to start at that location so that's what we're doing right here let me say 3 4 6 0 for the latitude and the lng longitude is negative 0.4907 and then create another variable and we'll call this map options and what this map option is going to be is wanna tell the map where it's going to be how it's going to be so we want it to be centered around this our latitude and longitude and we also want it to have a zoom and also we're telling it the type of map and that is for later but we're going to put it on the road map and you see what i mean we'll create a curly bracket again then we say center and then we'll say my latin long comma now we put zoom setting the zoom to seven you can set it to whatever you want twelve one just play with it that's the way you understand it now now we need to actually tell google what type of map we want so we want a roadmap and the way we do that is we create a variable called the map type id we set that to google dot maps dot map id with a capital m make sure it's a capital m dot road road map not road man road map just joking save that but we can't see the map why is that because we need to tell google now where to create the map so we create the map we use a var map is equal to new google dot maps dot map with a capital now we say document dot get element by id and what element are we getting by id is the div that we created that we wanted to put our map in let me just show you real quick it's this right here this google map and after that we want it to have map options so we wanted to have everything we put here that means it should be centered on this latitude and longitude it should have a zoom and it should be this type of map so we save it now we're not still seeing anything that's because we need to go to the css so now we go to the css say hash google map we're using the hash because it's an id not a class and we give it a width say 80 percent save it well where is our map now i'm going to give it a height of 400 pixels save it and voila our map is showing up because we give it a width and a height but you know what i'm going to add something else i want to give it a margin i of 20 pixels auto so it should be centered exactly and now i'm just going to enlarge this so we can see then this is our map you see it's centered on this latitude and longitude you can see spain right here and yep now what we're going to do is put another comment right here we're going to create a direct directions service service object to use the root method and get a result for our request so long-ass comment but just to make it understandable because that's important so we save our direction so yeah direction service so equal to new google dot map why is there space here is equal to new google.maps dot direction with a capital d because this is a function direction service and we also put a semicolon now another comment we're going to create a directions render what is happening right now is to create a directions render render object which we will use to display the roots and basically the same thing but this is for render we say directions renderer i know i will say directions display this is a variable you could call it whatever you want but i just feel display sounds better that makes more sense because it's for the display we say new google dot maps dot directions render or directions renderer semicolon now we're gonna bind the directions what is happening here it's like i create a comment and the next thing i'm on another line we're going to bind the directions render to the map and we just say directions display dot set map capital m and inside we pull map i know what i'm changing this direction to a small d because we're using camera notation here now we need to create a function this function is basically going to calculate the distance it's also going to be able to display everything we wanted to display that is the where we're coming from where we're going to and also the distance and the time it's going to take so i'm just going to put a function right here as a comment so say function calc root and inside we'll say create our requests so we save our request is equal to curly bracket origin documents dot get element by id i remember the id we made for from i want the value of that id so say that value whenever you want the value of something you have to put that value and we say destination destination say a document wow i really don't know what's happening to vs code today seriously it's like i'm popping out of different sections document dots maybe they have a bug or something because this is weird documents.getting member id 2 dot value and put a comma after value now we also put we're basically grabbing our inputs this is what we're doing right here now we want to tell it the travel mode because with and this there's going to be a part two for this where we'll be able to choose in our inputs what type of route or what type of direction or travel mode we want but just for this video we're going to choose the driving traveling mode there's also cycling there's transit and i think there's also walking so yeah those are the different types of traveling mode so we say travel mode so google the maps dot travel with a capital t travel mode dot driving and i'll put a comment here that will just tell you could also change this to walking or not cycling bicycling because if you put cycling it won't know what cycling is and transit now we need to set a unit system capital unit system google dot maps dot units with a capital u system dots in with all capital imperial yup and that's it for the request now just put another comment pass the request to the root method so that's what we're going to do here so we'll say direction service dot root say request now we can use our arrow function right here say result status you say if status is equal to [Music] google.maps direction direction status not spelled correctly status i have to make sure you spell this right because these are google um this is the google apis actual functions that we're calling right here or methods that we're calling right here status is equal to google.maps.directionstatus.okay curly bracket and here we just say get distance and time oh my gosh what is happening to this seriously i've never seen i i really think there's a bug in vs code today they better fix this get this stance on time so say constant output is equal to document dot query selector oh my this is my bad not query selector this is not vs go this time and yeah output and this is just us you know i told you that the just like you saw earlier the time and also the amount of of the distance so the time and the distance are going to show up in this div right here which is output and remember we created right here output empty so we're going to put the things that the output should have now we say output dot inner html is equal to i know what i'm just going to make this big screen because right now i just want you to see it better and we're not doing anything on the map webpage right now this is more back end stuff so say div i'll give it a class is equal to go to alert dash info and now we'll say from another comma plus so we just close that document dot get element by id from so that's the value right here so this is the text that's going to show up plus space and then a comma just one or quotes not comma quote plus document dot okay so after the quote after the quote right here just one say dot so that's a full stop and now put a line break br two another comma or not comma quote say document don't get the member id ah sorry for the barking noise if you're hearing that i really don't know what's up with our neighbors dogs maybe they saw a ghost or something now we just say two that is the idea we want to take the value because it's basically going to show the inputs whatever we put in the input this output is going to show the name of the place that we put on the input so it would say from las vegas to new york and that's because we put on our origin las vegas and on our destination we put in new york say dot then another br i'll put drive we'll put here driving distance and here right now let's go to our font awesome for the icon we pull map and yeah this road right here since it's by road it's driving we're going to add this icon there copy it and come back here and now paste it inside but what we'll need to do is we'll need to change these double quotes to single quotes and why is that is because we already have double quotes outside so if we don't change them to single quotes it javascript is not going to know when this com this um it's not going to know when this is closed or open because you know we always have opening quotes and a closing quote now put a colon after that and say plus results so that's the result of our roots and its roots results dot roots zero square brackets zero dot legs square back at zero dot distance dot text because we want it in a text form let's say plus quotes again we say dot br duration and we need to go to font awesome again i'm just going to add an hourglass and all this is um if you want it i just felt it looked better with them i think i put time or is it a clock or yep so you can choose whatever hourglass you want no let's use this or we could also have we could have whatever yeah hourglass copy and paste it change them to single quotes instead of double quotes now say plus result dots i will just copy this right here well if it's this is another problem with vs code sometimes when you want to do this yeah copy and then we just put it right here the routes dot legs but instead of distance we'll have duration because now we're dealing with time dot text and now plus double quotes dot now we need to close the div div and put a quote after that so hopefully everything is right there if it's not we'll have to come back to it but yeah it should be the next thing is we need to display the roots or routes i hope i'm not pronouncing the little roots or routes one of them but i hope you understand what i mean directions display dot set direction set directions and then put inside result after that we'll put an else now wants to delete the routes or routes from map so we say directions dot display are not directions display dot set directions and then inside that will put a curly bracket i'll say roots roots not roots roots square bracket and yep and after that i want the map to be centered again so center map in spain so say map dot set so we center map and spin so we sent a map in spain i would do that by saying map dot set center wow what did i write here center my flat and long so we set it to that coordinate and also wanted errors to show because imagine someone wants to check how far it is to travel by road from america to europe well it's not possible because it's not possible to travel by road from america to europe because of the sea so if someone does that i want there to be an error message to show that okay it can't retrieve this data or could not um retrieve that could not get the drivings or just the message to actually say that okay this whatever you're asking for i can't do that for you so that's what we're going to try and do here now we just say show shoe show error message now say output and it's going to be on the outputs too the inner html is equal to let's say div or give it a class of alert danger we'll close the div and now for the alert danger there's a nice font awesome icon we can use to just go here and we look for error yes that's it here oh no i preferred the other one actually the triangle so here's a triangle error paste it there the usual thing changes from double quotes to single quotes now we actually put the message we want say could not retrieve driving's distance and after that a period and we close the div with our semicolon 2. i'll put a semicolon right there and yep that's it so right now it should work we will set an autocomplete so when so you can actually get help but right now it should work but why the autocomplete is important is because i don't want you writing just to help with the spelling and also sometimes not knowing exactly how a destination is spelled well it's good to have autocomplete so it actually shows you different options and then you can choose the destination of the origin you want to put in the input so that's what we're going to do right here real quick so create auto complete objects for all inputs now we save var options is equal to say types square bracket single and then we just put cities and that's it for that now we say var input 1 is equal to document dot get element by id now what element are we getting is the form from not form from don't make that mistake now we save our o2 complete one is equal to new google maps dot places dot auto with a capital complete and as its input we'll put inputs 1 and options and now we just copy this it's quite identical and we do it for inputs too so change this to input two instead of from we'll put two autocomplete will be two here will be input two and it's gonna be the same options so yep yep so i'm just gonna check the code i'm just gonna check the code real quick to make sure we don't make any mistake and yep right here this is a mistake this should be a capital okay so capital o and a capital k now we save it and that should be it let's go to our web page go right here now we put the origin of las vegas and after that we put a destination of new york you see the autocompletes click right here and now we can see the map it shows us from a point a which is las vegas to point b and now you can see right here las vegas nv usa that's from to new york ny usa you can see the distance driving distance with this icon right here and then we have it in miles and then we have duration with this hourglass one day 13 hours so we can see that that's working out well we could style this and just put this in the center so let's try let's do that and we just say call the output not capital output small letters and we give it a text a line of center and we'll just give it a font size of 2m and a margin of 20 pixels auto now we can see the message right here it's way more bigger we could leave it at the size but just for you to see it you can i didn't change everything and all that and we can see the map it shows the route by car and you can zoom in i see right here it's really showing you the route by car to go from new york hall to go from las vegas to new york this is the route by car now what i just want to show you is that i want us to change the driving to walking and we'll see all these values also change with it so right here just copy this and instead of driving i'm going to put walking here save it now we say new york to las vegas and consider auto complete this is why it's so useful you don't have to click everything and now we can see that walking from new york to las vegas we should change this to walking distances of driving distance but i hope you understand it's 2552 miles and the duration is 34 days 23 hours to walk from las vegas to new york so to work from las vegas to new york is 34 days and 24 hours so anyone who wants to try that out yeah here you go at least you know you can make it approximately just add some more days maybe 40 days that's crazy but yeah so this is a part one we will be doing a part two where would actually i will add another input where you can choose what kind of method you want to use if it's driving or if it's working or if it's transit so that's what we're gonna add in the part two but for this i think this is okay for this video try it out yourself hopefully it works out for you play with the code you can add some stuff remove some stuff new york i know let's try somewhere else say alicante dorm and you can see it shows us from alicante to benedorm driving distance duration 34 34 minutes yeah if you go to this part and you enjoyed this video like the video i release content every time if you like content like this subscribe to the channel and yeah if you didn't like it you can also dislike the video that's cool and yeah that's it from me i'm gonna wrap things up and keep things moving watch out for the part two of this video and see you in another youtube video

Channel: Sam Codes

Views: 25,380

Keywords: google maps api, google maps, google map api, direction api, google maps route api, google maps distance matrix api, google maps distance matrix api javascript, google maps distance between two points api, distance api google maps, google maps directions api, google places api javascript, google places api autocomplete, google places api key, places api google, places api javascript, google maps api route between two points, google maps walking distance

Id: BkGtNBrOhKU

Length: 62min 59sec (3779 seconds)

Published: Fri Mar 19 2021