Forum Home

Driving Direction

API user can draw driving direction on map. Set origin and destination then click Direction button. Directions are requested using the AGDirections.load() and AGDirections.loadFromWayPoints() methods. If direction object is construct with agmap then those function draw a direction on the map. if a panel is passed in AGDirection constructor then it will fill the panel with direction instructions.


Origin: (latitude,longitude)
Destination: (latitude,longitude)

Driving Direction

   function btnCustomRoute_onclick() 
   {
      var arrWayPoits = getWayPoints();
      oDirection = new AGDirections();
      oDirection.loadFromWayPoints(arrWayPoits);
      AGEvent.addListener(oDirection, "onload", directionloadhandler);
   }
   
   //get waypoints from textboxes
   function getWayPoints()
   {
      var arrWayPoints = new Array();
      var arr = document.getElementById("txtOrigin").value.split(',');
      arrWayPoints.push(new AGCoord(parseFloat(arr[0]),parseFloat(arr[1])));
      arr = document.getElementById("txtDestination").value.split(',');
      arrWayPoints.push(new AGCoord(parseFloat(arr[0]),parseFloat(arr[1])));
      return arrWayPoints;
   }
   
   //draw driving route line
   function directionloadhandler()
   {
      var arrCoords = oDirection.getVertices();
      var oVectorStyleOpts = AG_DEFAULT_VECTOR_OPTIONS.copy();
      oVectorStyleOpts.strokeColour = "red";
      oVectorStyleOpts.strokeWidth = 5;
      oVectorStyleOpts.strokeOpacity = .3;
      var oLine = new AGPolyline(arrCoords,oVectorStyleOpts);
      agmap.addOverlay(oLine);
      oDirectionCustom.push(oLine);
   }
		

Driving Direction as text

To get the driving directions in a div panel, you need to specify the div when you instantiate the AGDrivingDirections class

Driving Direction Text

   var arrWayPoits = getWayPoints();

        oDirection = new AGDirections(agmap, document.getElementById("DrivingDirectionsPnl"));
        oDirection.loadFromWayPoints(arrWayPoits);