Forum Home

Driving Direction

API user can draw multiple route. AGDirection object provide routing points then you can draw route using polyline. After
setting the origin and destination click custom Route then you wait for a polyline represant the route.


Origin: (latitude,longitude)
Destination: (latitude,longitude)
Red Green Navy

Multiple Polyline Routes

   function btnCustomRoute_onclick() 
   {
      var arrWayPoits = getWayPoints();
      oDirection = new AGDirections();
      oDirection.loadFromWayPoints(arrWayPoits);
      AGEvent.addListener(oDirection, "onload", directionloadhandler);
   }

   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;
   }

   function directionloadhandler()
   {
      var strColor = "";
      if(document.getElementById("Red").checked)
      strColor = "red";
      else if(document.getElementById("Green").checked)
      strColor = "Green";
      else if(document.getElementById("Navy").checked)
      strColor = "Navy";

      var arrCoords = oDirection.getVertices();
      var oVectorStyleOpts = AG_DEFAULT_VECTOR_OPTIONS.copy();
      oVectorStyleOpts.strokeColour = strColor;
      oVectorStyleOpts.strokeWidth = 5;
      oVectorStyleOpts.strokeOpacity = .3;
      var oLine = new AGPolyline(arrCoords,oVectorStyleOpts);
      agmap.addOverlay(oLine);
      oDirectionCustom.push(oLine);
   }