Javascript Google Directions API Example to Display Routes Between Two Locations in Google Maps

uh Hello friends today in this tutorial I'll be showing you that how basically you can build out this application which calculates the directions or routes between any two locations in Google Maps so basically this is the application that I deployed on my website web Ninja developer.com finder I have also given the live demo link you can check out this application so basically if you land on this application you will be having two input Fields out there you will enter the source location and the destination location so let's suppose you are traveling somewhere outside you need to get the direction on the Google Map let's suppose if I'm in Delhi I need to go from let's suppose I type that nirman this is the from location and I need to go to Let's suppose Subhash okay so this is basically a location inside Delhi and as I now click this basically so what will happen here basically if I I need to refresh it so first of all as I write this location you can see this basically autocomplete will be coming here this is coming through Geo geocoding API of Google so I need to go to Subhash you can see that now we click this button out there as I click this button guys you will now see automatically it will give out these directions the from to to location basically you can see you can zoom in here basically you can even go into full size mode here you can see this is inside the blue blue dot here blue border basically this is Direction here this is a from location nirman here and you can see this is a two location which is Subhash nagar you will see basically it has given me the full Direction so if you are traveling through let's suppose a car here you can simply see this you can download the screenshot and basically depending upon how you are traveling you can basically follow the step-by-step instruction this direction that it has given you how to travel from German we are Subhash nagar basically all these directions and routes will come here you just need to follow these routes to reach to your destination so basically this is we are calling the Google direction API for this purpose so Google direction API render all these you will see basically these route here these directions that you are seeing right here these are all calculated by Google direction API and basically it has automatically done this for us so now if I change this location let's suppose if I change this location to any other country it is not limited to India so basically if I now write here Chicago if I select this location and now if I want to travel to from Chicago to Texas you will see that if I say both these are in USA so you need to select the locations which are there in the same country you cannot select two different countries because this is for driving purposes you will see if you click this now you will see that basically now it has calculated the directions here this is housed in Texas and this is Chicago you will see that basically this will give you the direction how you need to travel from Houston to Chicago so all these States will come in between here so this is basically the route you need to take this is very much useful if you are traveling it by driving the distance let's suppose these are very helpful for you have seen these locations basically in food ordering apps such as swiggy or zomato basically GPS tracker locations are there every time someone is traveling through a route there are some they make use of these applications so that they want to travel from one location to another location so these routes are very much important this is a from location and this is a two location so this is really useful guys you can change for any location out there it totally depends upon you which location you want to take let me take one other example Auckland Wellington so now you'll see that basically it is a very extensive application you can check out I have deployed this website sorry application in the description of the video I have given the link and now we will be writing this application step by step I will be showing you how to make this awesome little application a very few lines of code is required for this purpose guys to make this awesome little application you will definitely enjoy it I have written all the source code in the description of the video I have written all the JavaScript code as well in the description of this video so copy paste it just go to it follow the step-by-step instructions so now first of all you need to go to Google Cloud console where you basically enable the apis and also you need to get the API key for this purpose and here first of all go to credentials here and here you need to make your own API key simply click on create credentials and create your own API key and I will just some simply copy this API key here so don't copy my API key guys because at the end of this video I will delete this key so simply create your own API key after this we will now delete all this and start from scratch so basically here guys first of all what we need to do is that we need to Simply include the CDN which is required for this purpose so just after the title you need to Simply write this CDN here script source and this is equal to https maps.googleapis.com slash map slash API slash JS question mark key is equal to so here you need to copy paste your own API key and then you need to load the libraries so which is and libraries is equal to places so we are loading the Google Places apis as well guys for the fetching the autocomplete location so after this we also want the CDN for the bootstrap also guys so for the interface we are using the bootstrap as well you will see bootstrap CDN for the CSS part that's all so now to load this HTML guys so on load we will attach this method init map so whenever your application loads we will initialize a simple map here so right inside your JavaScript we will write the JavaScript here we will initialize this function which will basically display a map on the screen so for displaying the map on the screen guys we need some HTML here right here in the body so for having this we will first of all have a simple heading which is directions route founder and then basically we will have two break tags we will also give basically a bootstrap class of tech center to place the text in the center position so after this guy is basically what we need to do is that we will have a container class or bootstrap and here we will have two Fields out there first will be for the from so both these you will have form control bootstrap classes placeholder will be for Source location so here you will just enter your location from you will give it an ID here which is of source you will repeat this process for the destination location so simply copy this and paste it for the second time so this time this will be destination location so here you can change your ID field to destination that's all so then we will have a simple button guys basically to submit the form so we will have a button here so button class BTN BTN primary and basically we will have get directions that's all so now when you click this button guys we need just need to call a function which will calculate the route for us so calculate route but we will assign it later on so lastly we will be displaying a map in the div section here we will be giving an ID to it of map and The Styling will be height will be of 500 pixel and the width will be 100 percent hundred percent that's all so here we will dynamically display the map here inside using this init map function so first of all we will declare the map variable right here at the very top so right here we will assign this map using google.maps.map and here we will be passing the reference document dot get element by ID which is map and then in the second argument we will be passing the options here first is the center location so this will basically take the latitude which is 37 point 7749 and then we take the longitude which is minus 122. this is very optional you don't need to provide this but we need to provide zoom level all the map 13. so you can change all these options depending upon after this basically guys we just need to add a event here which is we can assign events to our map here using this function at event listener we will assign a click event handler here so whenever you click inside the map we need to enable the mouse wheel so that we can zoom in so we can simply set this call this option set options inside this we will simply say scroll wheel to true so this simply means that you can scroll you can use the scroll wheel of the mouse to basically zoom in and zoom out of the map so now if you just open this here guys you will now see your map will be shown to you you can see that you can click inside and now you can see you can scroll and scroll out to zoom in and zoom out basically this is all and you can even just see the full screen of the map so our Google Map is loading here guys so now we simply need to put the location here put the autocomplete location for having the location guys it's very simple after you do this we just need to assign some variables right here at the very top here Direction service and directions renderer so just declare these variables so after you do this we simply need to here call here Direction service and we will simply say new Google Maps direction service so here we are simply calling the Google direction API here so after this we will initialize the directions render so this is equal to new Google Maps directions renderer so here Direction rendered there is basically we need to set it to the current map that's all and now basically guys we will be fetching the autocomplete fields we will be assigning the data to it so that whenever you write something so this will be Source Auto Complete variable so we will be just be assigning these variables just declare source auto complete and destination autocomplete so these are just two local variables and Source autocomplete we have we will assign here which is new Google Maps place we will now use the Google Places API and this contains a method which is autocomplete and inside this we will simply pass the reference here guys so we have given the ID to that of source and similarly we will be repeating it for the destination so new Google Maps dot places and it contains autocomplete and inside this we will pass the reference which is destination that's all so now guys we need to if we if I just refresh it basically what you will find if I now type the location you will now see the results out there Auto completing so this is basically meant by this you can now type any location let's suppose if I so now if I click this button guys I need to show the directions so it's very easy we need to bind a function here whenever we click this button we just need to execute a function here which will calculate route this is a function so now we just need to Define this function so function calculate route so inside this function guys we just need to take the source location which is present right here and destination location and need to calculate the routes so we will declare we will get the value here Source value Source value and then we have the destination so after we take these two source and destination now we will simply make a request guys to the Direction API here we will pass the origin Property to the source location and then we have the destination property which is stored inside destination and then we have the three third property guys which is travel mode this is really important how we need to travel between these two locations by driving in a car so we will put here driving you can read the documentation of Google Direction API guys it supports all these options that I'm talking about and now we can simply say Direction service and it contains a method guys which is Route so with the help of this method we can now pass our request and this takes a callback function holding the result and the status and here basically what we can say that if status is equal to okay in that case our request is successful and now now we can simply show these on the map now to show this on the map we will use Direction renderer and here we will call a method of the API which is set directions and we will pass the result that's all so now this will show the also the result on the map itself so if I now open this service here you can now see if I type a location here let's suppose if I type Jammu here India Jammu and now if I type here let's suppose Jaipur click on that and now you can see that basically it will give you the Direction guys if you want to travel from Jaipur to Jammu or Katra or vice versa you will see the direction or the locations what you need to what routes you need to travel through it basically tells the shortest path so in between two locations out there you will see that it is basically the shortest path and the available path here so in this way guys you can make this awesome little application using Google direction API I have shown you step by step all the source code is given in the description of this video you can copy paste all the source code please hit that like button subscribe the channel and I will be seeing you in the next video Until then thank you very much

Channel: Coding Shiksha

Views: 13,353

Keywords: google directions api

Id: 0gsx7le0ECM

Length: 16min 9sec (969 seconds)

Published: Mon Jan 16 2023