Javascript Google Distance Matrix API Example to Calculate Distance & Time Between Two Locations

uh hello friends today in this tutorial we will be building a application which will tell you the exact distance between two locations and for this application we will be using google distance matrix api so this is the interface of the application you can see the live demo so here this is a simple interface you will enter the location from and to destination and origin and then if you click the calculate button it will tell you the distance in miles kilometers and also it will tell you the exact distance in text also in minutes also how much time it will take to travel by drive and from into so basically if i enter any sort of location like this you will see now if i enter this location so if i click calculate so now you will see it will exactly tell me the miles here which is 9 miles 14 kilometers 39 minutes distance in minutes is 2350 minutes and distance from you can see the exact location so this you can repeat for any location in the world this is not a limit to a certain country you can also pick let's suppose this is autocomplete we are using of google places api so if i take example of america so if i pick cities also it is also valid for cities also you will see it will exactly tell me the distance between these two locations which are actually cities 270 miles 435 kilometers distance will be 4 hours 7 minutes and distance in minutes you will see and if you just search one more time like this and now you will see exactly it will tell you one three five one miles so this you can repeat for any location guys you can see so this is a very useful applications in many scenarios when you want to travel you need to use this online tool in order to calculate the distance between two locations so this is a very handy tool so this will only work between a certain country if you are traveling so let's suppose you write here you select here usa and then you need to select india so this will not work in this situation because we are only calculating the distance between the roads here so it is just it will just say better get on a plane there are no roads between this the origin and destination so make sure that you're calculating the distance only the the origin and destination needs to fall between the same country so this is just a restriction of this application you can also build that feature into in this application but for the sake of simplicity i haven't implemented that scenario so now to build this application if you want the full source code you can go to the video description link i have given the link in the video description of my blog post let me just show you that blog post so this is a blog post so all the source code will be there inside video description alongside with the screenshot so here you need to paste your own api key which you can get using google cloud console account so you should be having a active google cloud console account so just go to google and type here google cloud console and just sign up for account after that create a api key and simply paste it and also after going in you just need to enable the google distance matrix api so you need to enable that api first of all so if you just go to api section and here you just need to enable this distance matrix api so simply you need to click enable so it will get enabled so just enable it i i have already done that so now moving on to the code here you can also download all the source code in the video description i have given the link so now we will build this application from scratch so let me just delete all this code here let me write it once again and also let me delete all the javascript and now just open a simple text editor just include the bootstrap css cdn and also include jquery cdn and just copy paste this script tag from my website this is the library strip script tag and here you need to copy paste your own api key that's it so now we will use the container class of bootstrap inside this we will have the heading in the center position we will say calculate distance between two locations and then we will have a simple form we will give it an id of again form here inside this we will have the form group class and here we will give it an id of that is from so here we will say origin so this will be of we will be giving a form control class of bootstrap so input type will be text and in the placeholder we will say enter origin location and this should be required and we can give it a id of from that's it from and similarly we can remove just repeat this for two also so here we can just say two so we can just say here destination so again we can again have the input field so input type will be text and in the id parameter we can just say two and in placeholder we will say enter destination location and this should be also be required and we also need to give it a class of form control so here in the form group we also need to give it a class of container so basically if you run this application now you will see two input fields out there which is there so here also we need to give it a container class just to create some margin so now we have two input fields now we need to bind the autocomplete here whenever we type here we need to bind the autocomplete functionality so that we can do here simply by going to the script section after the body just write some custom script so here we will first of all bind this for this input field here so first of all let me just show you the blog post if you go to my blog post i have written this code here step by step so this contains a listener here which you need to listen let me copy that listener so it will be google.maps.event.add.listener so we will be listening for the load event so when the google map is loaded successfully so the first argument is window second will be load and the third will be callback function so here we will simply load the map here so first of all we need to create for the from so we can get the reference so if you just see here we need to say google dot map dot places dot autocomplete and here we need to pass the reference so what we can do is that here we can pass the reference or we can create a new element here which will be from location and this will be equal to document.getelementbyid and the id we have given which is from and same we can do this for the two location also we have given the id2 so here we can pass the reference here simply pass the reference which is from location that's it so this is done here and now we simply need to do the this process once again for the two locations so we can simply copy paste and here we can replace two location that's it so this is done for two location as well now what we need to do is that so now once again if you just now see here if you type anything here you will see the autocomplete is it is saying google is not defined so let me just see what is a so let me just see it is saying google is not defined so inside this so i think it is saying because we haven't defined the function so inside this endpoint you can put a callback parameter so whenever this library is loaded we will execute this method which is init map so now you can surround this code here inside this init map function so function init map that's it so make this modification guys in this code here that's it so simply what we are doing here is that we are adding a parameter inside this request callback which is init map init map is the function name which we have added here and we have defined this function inside our javascript so [Music] after this also we need to add and symbol and simple just add this and now if you refresh it hopefully our it is saying cannot read properties of undefined so it is not accessible these variables are not accessible here so we need to pass here only document.getelementbyid from and same we need to do this here also document.get element to id2 so do it like this so now this will work hopefully once again we have faced the problem let me just see here if you just go if i just copy paste this code here let me paste this and remove this callback we don't need this just put and here just replace the id here from and to because we have given the id which is from and two so now if i if refresh here it is saying unexpected oh sorry we are missing this thing what we are missing let me just see inside the source code you will see here just write this code here like this just copy this and paste it here and replace the ids here which is from and do so sometimes problem can occur so you need to be patient it is saying google is not defined once again in this situation i think what we have done is that let me just paste this once again this descript tag let me paste it just to troubleshoot if it is working or not obviously we the ids are different here so we need to replace the same id so just go to this input field here and replace it from place and this id to two place from places sorry two places and hopefully this will solve the problem so now you will see our drop down is working here so this was just a problem of giving the wrong id so make sure that you give the same id that i mentioned in the video description and once again let me remove this other code here like this so we were in this scenario we were there let me just remove this here so we were there so we have attached this previously we were there in this situation let me again open this so you will see these drop downs are happening here you can see we have successfully attached this if i see in the console here everything is fine no problem is there so now what we need to do is that we need to get the addresses here so once again inside this api there is a event here which is google.maps.event dot add listener so inside this listener here we will pass our [Music] from places input element and then there is the event name called as places underscore changed so whenever you enter some kind of place inside that input field this event will automatically fire this function and here inside this function we need to get the actual place which the user has entered so here we will say from place and to get to get the actual place we will call the get places get place method and now to get the address it is very simple from address we will say here from place dot and this contains a method which is sorry property formatted address and now we can console log from address and same we can do this for the two field also simply copy paste it and here you need to replace your id which is two places and simply rename to two place two address and simply we can just log here to address that's it so now if you refresh it you will see if you type any sort of address here it is not logging the address so from places places under score changed from address to address so it is not logging it so sometimes it can happen but let me move on without wasting some time here let me just summarize this code for you what has happened here let me copy paste all this code copy from the body i'm just explaining you the markup here it is very easy let me paste it so you can see this is a heading calculate the distance between two addresses then we have the simple two input fields which are holding the from places and two places and then we have this input field which will hold the actual address it is hidden by default and same goes for the destination address also then we have a simple button which will calculate the distance and then we have simple unordered list which will display all the items for us and for the javascript this code is also variable simply copy paste this code also paste it so here what we are doing is that we are taking the original address then we are taking destination and then we are invoking the distance metric service and then we are passing some options here which is origin destination travel mode unit system and in the callback function we are displaying all the results here we are displaying the distance duration in kilometers miles by some jquery you can see that so if you want all the source code go to the video description link and download all the source code so here inside this form we are calling this calculate distance function here just targeting this form invoking the submit event handler and just and thus calculating the distance so it's a lot of code so when typing some errors may take place sometimes so that is why i just wanted to summarize this code so if you just write your write this code with yourself you will exp you will just explain more so i have written this code step by step so i know you can just see it's a very good application make sure that you use it and if you want the full source code go to the video description link and please hit the like button subscribe the channel and i will be seeing you the next video

Channel: Coding Shiksha

Views: 20,917

Keywords: coding shiksha, distance matrix api javascript, google distance matrix api, google distance matrix api tutorial, calculate distance between two locations

Id: J4NFBfxkZkw

Length: 23min 39sec (1419 seconds)

Published: Sun Jan 02 2022