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=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>