Find us on facebook

Aug 29, 2014

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> 

No comments:

Post a Comment