how to add google Directions in google maps

Question

The current code retrieves all info, displays all markers on a map and if a marker is clicked, infowindow renders showing its content. What i want to do is that i want to implement directions in this. How can i add directions in my code so that it will also add directions? This is what i want to implement:

what to implement :

var request = {
  origin: start,//it will be my first row(lat and lon)
  destination: end,//it will be my lastrow(lat and lon)
  waypoints: waypts, // it will be all lat and lon between first and last
  optimizeWaypoints: true,
  travelMode: google.maps.TravelMode.DRIVING
 };

 directionsService.route(request, function(response, status){
if (status == google.maps.DirectionsStatus.OK){
    directionsDisplay.setDirections(response);
}
 });

My current code in which i want to implement the above functionality mean google maps directions:

already implemented :

$("#directions").click(function(){
    var lat_from_ip   = $("#hidden_lat").val();
    var lon_from_ip   = $("#hidden_lon").val();

    var latlng = new google.maps.LatLng(lat_from_ip, lon_from_ip);
    var options = {zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
    var map = new google.maps.Map(document.getElementById('map'), options);

    $.ajax({type: "GET",
    dataType: 'json',
    url: url +'//abc/my_page.php',
    success: function(response){
         var total=response.length;
         var data_array,name,type,address,lat,lon,infowindow;
         var infowindow = new google.maps.InfoWindow();  

       for(var i=0; i < total; i++) 
       {
            data_array=response[i];
            name=data_array['name'];
            address=data_array['address'];
            notes=data_array['notes'];
            lat=data_array['lat'];
            lon=data_array['lon'];

        var propPos = new google.maps.LatLng(lat,lon);

            propMarker = new google.maps.Marker({
                    position: propPos,
                    map: map,
                    icon: icon,
                    zIndex: 3});

var contentString = "<div>"+name+"<br/><label class='label'>Location :</label> "+address+"<br/><label class='label'>Notes :</label> "+notes + "</div>"; 

              function bindInfoWindow(marker, map, infowindow, html) {
         google.maps.event.addListener(marker, 'click', function() {
               infowindow.setContent(html);
               infowindow.open(map, marker);
                });
                 }

             bindInfoWindow(propMarker, map, infowindow, contentString);

     }   //end of for loop
          } //end of for success
    }); //end of for $.ajax
    return;


    });

Answer 1

This is how to convert your php array to js array

for instance you have php array

<?php
$my_array = array("a","b","c");
 ?>

now in js do so

<script>
var jsArray = ["<?php echo join("\", \"", $my_array); ?>"];
alert(jsArray);

and in your domain its like this. lets say you have php array like this. $data ;//this is your php array

Array
(
[0] => Array
    (
        [lat] => 31.453795
        [lon] => 74.388497
    )

[1] => Array
    (
        [lat] => 31.454387
        [lon] => 74.388541
    )

[2] => Array
    (
        [lat] => 31.453795
        [lon] => 74.388497
    )
   .
   .
   .
 )

in js do so

var waypts = [];
<?php
 foreach($data as  $key => $value){
if(($key == '0') || ($key == count($data)-1)){
    continue;
    }?>
 waypts.push({location:  new google.maps.LatLng(<?php echo $data[$key]['lat'] ?>, <?php echo $data[$key]['lon'] ?>)});
<?php }?>

Answer 2

Function to draw directions, call it whenever you want to show directions. You can pass some variables to it, and use them inside, to decide which markers will be start, end and waypts.

function calcRoute() {
    var startpt = yourstartlatlng;
    var endpt = yourendlatlng;
    var waypts = [] //your waypts array, if there are more than 1 point
    var request = {
        origin:startpt, 
        destination:endpt,
        waypoints: waypts,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }

Example from here: Google Maps Api

EDIT: When you have an array in php called waypts, and you want to have these values in javascript, you need to pass them to java. Its kinda messy, but thats the only way i know:

<script type="text/javascript">
    var waypts = [];
    <?php
        $waypts= array(1, 2, 3, 4); //<-- your array, can be called like that, or just have values inside already
        for($i = 0; $i < sizeof($waypts); $i++){
    ?>
    waypts[<?php echo $i; ?>] = <?php echo $waypts[$i]; ?>; //php is interpreted before java, when site will load, these values will be inside java "waypts" variable. 
    <?php
        }
    ?>
    alert(""+waypts[1]);
</script>

That code will put your php variables/array into java array (alert is just to check if it did the job, you can delete it, once you understand the code). Then you can use these variables however you want. PHP is interpreted earlier than java, so in site code you will get waypts[0] = 1; cuz php code will be already replaced by values from array.