Google Maps API Directions Service Example - SoftAuthor

Create an instance of the DirectionsService Object. ... Call the route() method on the directionsService object to initiate a request to the ... GoogleMapsAPITutorials(JavaScript) Introduction WhatisGoogleMapsAPI? GoogleMapsAPIKey GoogleMapsErrors&Solutions MapsAPI MapsAPIDisplay/ShowMap MapsAPIPlaceAMarker MapsAPIMarkerClustering MapsAPIInfoWindow MapsAPIDrawAPolygon MapsAPIDrawAPolyline PlacesAPI PlacesAPINearbySearch PlacesAPITextSearch PlacesAPIPlaceDetails PlacesAPIAutocomplete GeocodingAPI GoogleMapsGeocodeAPI DistanceMatrixAPI GoogleMapsDistanceMatrixAPI DirectionsAPI GoogleMapsDirectionsService Projects GetUserCurrentLocationUsingHTM5GeolocationAPI LastmodifiedonJune12th,2022 RajaTamil GoogleMapsAPI Javascript 5,051 DirectionsService TheDirectionsServiceisaclient-sideJavaScriptlibraraythatletsustogetdirectionsdatabetweentwolocationsbasedontravelmodesuchasdriving,walkingetc. TheDirectionsServicetalkstoGoogleMapsAPIbehindthescenethattakesdirectionrequestssuchasorigin,destination,travelmodeandreturnstheefficientdirectionspathdataincludingmulti-partdirections. EnableDirectionsAPIlibrary First,makesurethattheDirectionsAPIlibraryisenabledontheGoogleCloudConsole. IncludeMapsJavaScriptLibrary Also,makesuretoincludethegooglemapsclientsidelibraryintheproject. MakeARequestToDirectionsService CreateaninstanceoftheDirectionsServiceObject. constdirectionsService=newgoogle.maps.DirectionsService(); Calltheroute()methodonthedirectionsServiceobjecttoinitiatearequesttotheDirectionsService. directionsService.route(); ThismethodtakesacoupleofargumentswhichareDirectionsRequestandresponsecallbackfunction. DirectionsRequest DirectionsRequestwillbeajavascriptobjectwhichiswherealltherequiredqueryparametersareaddedasproperties. directionsService.route( { origin:"190MainStreet,Ottawa,Canada", destination:"290FirstAvenue,Ottawa,Canada", travelMode:"DRIVING" } ) namedescriptionoriginThevalueoftheoriginparametercanbeoneof3formatswhichareplainstreetaddressorgeographiccoordinates(latitudeandlongitudeseparatedbyacommawithoutanyspaceinbetween)ortheplace_id.ThiswillbethestartingpointforcalculatingthedirectionsbetweenlocationsForExample:origin=123+Slater+Street+ONorigin=41.43206,-81.38992origin=place_id:r345UTjjf(&*(*ljh*&destinationThevalueofthedestinationparametercanbeoneofthethreeformatssimilartoorigin.Thiswillbetheendingpointforcalculatingdirectionsbetweenlocations.ForExample:destination=321+Slater+Street+ONdestination=41.43206,-81.38992destination=place_id:r345UTjjf(&*(*ljh*&travelMode–MuppercaseThiscouldbeDRIVING,BICYCLING,TRANSIT&WALKING–anditmustbealluppercase ResponseObject Thesecondargumentofroute()methodwouldbearesponsecallbackfunction.  TheDirectionsServiceisasynchronoussothecallbackfunctionwillbecalleduponcompletionoftheServicerequest. directionsService.route( { origin:"190MainStreet,Ottawa,Canada", destination:"290FirstAvenue,Ottawa,Canada", travelMode:"DRIVING" }, (response,status)=>{ console.log(response); console.log(status); } ) ThenitwillreturnadirectionsResultandaDirectionsStatusthatwecanaccessfromtheparametersinthecallbackfunction.  Asyoucansee,theresponseobjecthasalotofinformationaboutthedirections…thelegspropertywillhavetraveldistance,durationandstepsinformationwhichbasicallytellsyouwhentomaneuversuchasturnleft,turnright,keeprightandsoon. Theoverviewpathwillshowyouthelocationcoordinateswhichcanbeusedtodrawthepolylinebetweentheoriginanddestinationlocationsonthemap.  Show/PostComments Hey,Likewhatyou'rereading?Checkthisout! CouponCodeSent!Pleasecheckyouremail! SendMeCode$15.99$119.99 offerendssoon Facebook Twitter Pinterest LinkedIn