google map with way points

for($via_counter=0;$via_counter<$no_of_via_points;$via_counter++){
$via=mysql_real_escape_string($_GET["via_point_postcode_$via_counter"]);
$waypts[] = array(
'location' => $via,
'stopover' => true,
                     
);

}
$waypts[] = array(
'location' => $from_val_return,
'stopover' => true,
 
);
$waypts=json_encode($waypts);

<div id="map" style="width: 908px; height: 300px; float: left; margin-bottom:10px;"></div>
<div id="directions_panel" style="background-color:rgb(229, 227, 223);"></div>
<style>
<style>
#route {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    width: 100%;
    border-collapse: collapse;
}

#route td, #route th {
    font-size: 1em;
    border: 1px solid #98bf21;
    padding: 3px 7px 2px 7px;
}

#route th {
    font-size: 1.1em;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: #A7C942;
    color: #ffffff;
}

#route tr.alt td {
    color: #000000;
    background-color: #EAF2D3;
}
</style>
</style>
<script type="text/javascript">

var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();

var map = new google.maps.Map(document.getElementById('map'), {
   zoom:5,
   mapTypeId: google.maps.MapTypeId.ROADMAP
});

directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('panel'));
waypts = <?php echo $waypts;?>;

     var request = {
       origin: '<?php echo $from; ?>',
       destination: '<?php echo $to_val_return; ?>',
  waypoints: waypts,
       travelMode: google.maps.DirectionsTravelMode.DRIVING
     };


     directionsService.route(request, function(response, status) {
       if (status == google.maps.DirectionsStatus.OK) {
         directionsDisplay.setDirections(response);
var route = response.routes[0];
 var summaryPanel = document.getElementById('directions_panel');
 var HTML = '<table id="route">';
 HTML += '<tr><th>Route</th><th>From</th><th>To</th><th>Distance</th></tr>';
 // For each route, display summary information.
 for (var i = 0; i < route.legs.length; i++) {
var routeSegment = i + 1;
HTML += '<tr><td><b>' + routeSegment + '</b></td>';
HTML += '<td><b>' +route.legs[i].start_address + '</b></td>';
HTML += '<td><b>'+route.legs[i].end_address + '</b></td>';
HTML += '<td><b>'+route.legs[i].distance.text + '</b></td></tr>';
 }
 HTML +='</table>';
 summaryPanel.innerHTML = HTML;
       }
     });
   </script> 

Via Points

HTML
include_once $_SERVER['DOCUMENT_ROOT'].COMMON.'/js/js_homewaypoint.php';
<input type="button" value="Add Waypoint" id="addwaypoint"/>
<div id="via-container"></div>
<input type="hidden" id="no_of_via_points" name="no_of_via_points" value=""/>
js_homewaypoint.php
<link rel="stylesheet" href="scripts/jquery/themes/redmond/jquery.autocomplete.css">
<script src="scripts/jquery/autocompleteused/jquery-1.9.1.min.js"></script>
<script src="scripts/jquery/autocompleteused/jquery-ui.min.js"></script>
<script>
$(document).ready(function()
{

var via_counter = 0;

$('#addwaypoint').click(function () {
                var str = '';
str += '<div id="via_container_' + via_counter + '"><label>Via Point No: ' + (via_counter+1) + ' <a href="javascript:void(0);" class="remove"><img src="styles/images/cross.png"></a></label>';
str += '<input type="text" id="via_point_' + via_counter + '"  class="area-point-text-input" />';
str += '<input type="hidden" id="via_point_id_' + via_counter + '"  class="via_point_id" />';
str += '<input type="hidden" id="via_point_table_' + via_counter + '"  class="area-point-text-input" />';
str += '<input type="hidden" id="via_point_type_' + via_counter + '"  class="area-point-text-input" />';
str += '<input type="hidden" id="via_point_postcode_' + via_counter + '"  class="area-point-text-input" />';
str += '<div id="via_point_error_' + via_counter + '" class="error_bg" style="display: none;">Please Enter Valid Drop Off Point</div>';
str += '</div></div>';
$("#via-container").append(str);
$(function() {
$("#via_point_" + via_counter).autocomplete({
source: "get_search_values.php",
minLength: 1,
select: function( event, ui ) {
$("#via_point_id_"+(via_counter-1)).val(ui.item.id);
$("#via_point_table_" + (via_counter-1)).val(ui.item.table);
$("#via_point_type_" + (via_counter-1)).val(ui.item.area_type);
   $("#no_of_via_points").val(via_counter);
$('#via_point_postcode_'+(via_counter-1)).val(ui.item.postcode);
if(ui.item.id != ''){
$("#via_point_" + (via_counter-1)).css("background"," url('styles/images/tick.png') right center no-repeat #ffffff");
$("#via_point_error_" + (via_counter-1)).hide();
//$("#from-point-container").hide();
//$("#from-point-container-display").show();
}
  return ui.item.label;
 },
});

});
                via_counter++;
        });

$("body").on('click', ".remove", function () {
via_counter--;
$('#via_container_' + via_counter + '').remove();
$("#no_of_via_points").val(via_counter);

});

});
</script>

when click on button we can call to php file to get something done

var no_of_via_points = $("#no_of_via_points").val();
viaString="";
for (via_counter = 0; via_counter < no_of_via_points; via_counter++) {
viaid=$("#via_point_id_"+via_counter).val();
viatable=$("#via_point_table_"+via_counter).val();
constidstring = "&via_point_id_"+via_counter+"=";
consttablestring = "&via_point_table_"+via_counter+"=";
if(viaString==""){
viaString = constidstring+ viaid+consttablestring+viatable;
}else{
viaString = viaString+constidstring+viaid+consttablestring+viatable;
}
}
var dataString = 'no_of_via_points='+no_of_via_points+viaString;
;
$.ajax({
 type: "POST",
 url: "ajax_quote.php",
 data: dataString,
 beforeSend: function(){ jQuery("#ajax_loader_quote").show(); jQuery("#quote-price-container").show(); jQuery("#reserve-button").show(); $('#load_price_ajax').hide(); },
 complete: function(){ jQuery("#ajax_loader_quote").hide(); $('#load_price_ajax').show();},
 success: function(response)
 {
$('#load_price_ajax').html(unescape(response));
 }
});

ajax_quote.php
for($via_counter=0;$via_counter<=$no_of_via_points;$via_counter++){
unset($_SESSION["via_point_id_".$via_counter]);
unset($_SESSION["via_point_table_".$via_counter]);
$_SESSION["via_point_id_".$via_counter] = (int)mysql_real_escape_string($_POST['via_point_id_'.$via_counter]);
$_SESSION["via_point_table_".$via_counter] = mysql_real_escape_string($_POST['via_point_table_'.$via_counter]);

}

Vehicle Dropdown with images

html file
include_once $_SERVER['DOCUMENT_ROOT'].COMMON.'/js/js_homewaypoint.php';
<div id="vehicle"></div>

js_homewaypoint.php
<script src="scripts/jquery/autocompleteused/jquery-ui.min.js"></script>

<script src="scripts/ddslickvehicles/jquery.ddslick.js"></script>
<?php
$vehicleArray = $objaVehiclesTbl->getVehiclesAll();
while($vehicleRow = mysql_fetch_array($vehicleArray)):
    $imageName = $vehicleRow['image'];
    $imageSrc = "images/$imageName";
    $vehicleData[] = array(
'text' => ucwords(strtolower($vehicleRow['name'])),
'value' => (int)$vehicleRow['id'],
                        'description' => $vehicleRow['desc'],
                        'imageSrc' => $imageSrc
);
endwhile;


$vehicleDataJason = json_encode($vehicleData);

?>

<script language="javascript">
   
$(document).ready(function()
{
$('#vehicle').ddslick({
data: <?php echo $vehicleDataJason; ?>,
width: 289,
imagePosition: "left",
selectText: "Select Vehicle",
onSelected: function (data) {
  console.log(data);
$("#vehicle_way_one_index").val(data.selectedIndex);
$("#vehicle_way_one").val(data.selectedData.value);
$('#vehicle-return').ddslick('select', {index: data.selectedIndex });
if(data.selectedData.value != ''){
$('#vehicle_error').hide();
}
}
});
});
</script>