Find us on facebook

Showing posts with label Google Maps. Show all posts
Showing posts with label Google Maps. Show all posts

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>