Google Maps API V3: DirectionsService (Driving Directions ...

Here Mudassar Ahmed Khan has explained with example and attached source code, how to use the Google Maps API V3 to plot driving directions and route on Google ... Home Categories Questions InterviewQuestions Contact Search Search Home Categories Questions InterviewQuestions Contact Search 12May2015   MudassarKhan 5 Comments 47187 Views Google HereMudassarAhmedKhanhasexplainedwithexampleandattachedsourcecode,howtousetheGoogleMapsAPIV3toplotdrivingdirectionsandrouteonGoogleMapsusingtheDirectionsService. Download ViewDemo DownloadFreeWord/PDF/ExcelAPI DownloadFreeWord/PDF/ExcelAPI InthisarticleIwillexplainwithexampleandattachedsourcecode,howtousetheGoogleMapsAPIV3toplotdrivingdirectionsandrouteonGoogleMapsusingtheDirectionsService.   HTMLMarkup TheHTMLMarkupconsistsoftwoTextBoxesfirstoneforenteringSourceaddresswhiletheotherforenteringdestinationaddress,aButtonandthreeHTMLDIVsfordisplayingthedistanceanddurationdetails,plottingmapanddisplayingdirections.            Source:                 Destination:                
               

---

                                                                                CalculateDistance,TravelDuration,draw(plot)RouteanddisplayDirections usingDirectionsService InsidetheGoogleMapswindowloadeventhandler,forthesourceandthedestinationTextBoxesIhaveimplementedGooglePlacesAutocompleteTextBox.FormoredetailspleasereferImplementGooglePlacesAutocompleteTextBox. WhentheButtonisclicked,firsttheMapandtheDirectionsserviceisinitializedtodisplaythemapandthedirectionsintheirrespectiveHTMLDIVs. ThenusingthesourceanddestinationaddressesfromtherespectiveTextBoxes,thedetailsofthedirections,route,distanceanddurationaredisplayedinsidetherespectiveHTMLDIVs. varsource,destination; vardirectionsDisplay; vardirectionsService=newgoogle.maps.DirectionsService(); google.maps.event.addDomListener(window,'load',function(){    newgoogle.maps.places.SearchBox(document.getElementById('txtSource'));    newgoogle.maps.places.SearchBox(document.getElementById('txtDestination'));    directionsDisplay=newgoogle.maps.DirectionsRenderer({'draggable':true}); });   functionGetRoute(){    varmumbai=newgoogle.maps.LatLng(18.9750,72.8258);    varmapOptions={        zoom:7,        center:mumbai    };    map=newgoogle.maps.Map(document.getElementById('dvMap'),mapOptions);    directionsDisplay.setMap(map);    directionsDisplay.setPanel(document.getElementById('dvPanel'));      //*********DIRECTIONSANDROUTE**********************//    source=document.getElementById("txtSource").value;    destination=document.getElementById("txtDestination").value;      varrequest={        origin:source,        destination:destination,        travelMode:google.maps.TravelMode.DRIVING    };    directionsService.route(request,function(response,status){        if(status==google.maps.DirectionsStatus.OK){            directionsDisplay.setDirections(response);        }    });      //*********DISTANCEANDDURATION**********************//    varservice=newgoogle.maps.DistanceMatrixService();    service.getDistanceMatrix({        origins:[source],        destinations:[destination],        travelMode:google.maps.TravelMode.DRIVING,        unitSystem:google.maps.UnitSystem.METRIC,        avoidHighways:false,        avoidTolls:false    },function(response,status){        if(status==google.maps.DistanceMatrixStatus.OK&&response.rows[0].elements[0].status!="ZERO_RESULTS"){            vardistance=response.rows[0].elements[0].distance.text;            varduration=response.rows[0].elements[0].duration.text;            vardvDistance=document.getElementById("dvDistance");            dvDistance.innerHTML="";            dvDistance.innerHTML+="Distance:"+distance+"
";            dvDistance.innerHTML+="Duration:"+duration;          }else{            alert("Unabletofindthedistanceviaroad.");        }    }); }     Screenshot     Demo ViewDemo     Downloads GoogleMaps_CalculateDistance.zip DownloadFreeWord/PDF/ExcelAPI RelatedArticles Previous Next Nocommentshavebeenaddedtothisarticle. AddComments Thankyouforthefeedback.Thecommentisnowawaitingmoderation.Youwillbenotifiedviaemailwhentheauthorrepliestoyourcomment. Pleaseselectacommenttoreply Youcanaddyourcommentaboutthisarticleusingtheformbelow.Makesureyouprovideavalidemailaddresselseyouwon'tbenotifiedwhentheauthorrepliestoyourcommentPleasenotethatallcommentsaremoderatedandwillbedeletediftheyareNotrelavanttothearticleSpamAdvertisingcampaignsorlinkstoothersitesAbusivecontent.Pleasedonotpostcode,scriptsorsnippets. Name Email Comment   Securitycode: Invalidsecuritycode. Ideclare,Iacceptthesite's PrivacyPolicy.   AddComment OurSupportTeamisheretohelp. AskQuestion Disclaimer:ThecodesamplesandAPIavailableatwww.aspsnippets.comareavailableabsolutelyfree. Youarefreetouseitforcommercialaswellasnon-commercialuseatyourownrisk,butyoucannotuseitforpostingonblogsorothertutorialwebsitessimilartowww.aspsnippets.comwithoutgivingreferencelinktotheoriginalarticle. AllthecodesamplesandAPIprovidedbytheauthorsaresolelytheircreationandneithertheauthornorthesiteareresponsibleifitdoesnotworkasintended. Iagreetotheaboveterms. Download Required ViewDemo Whatourreaderssay Previous Next © 2022 www.aspsnippets.com Allrightsreserved|PrivacyPolicy |PoweredbyExcelasoftSolutions ThissitemakesuseofCookies.PleasereferPrivacyPolicyformoredetails. Gotit