CODEWITHSUNDEEP
javascripthtmlgoogle-mapsgoogle-maps-api-3
sTg
sTg

Reputation: 4434

Suggested Routes Option in Google Maps API?

I have a requirement to show multiple routes between the source and destination. Eg: If i am selecting a source and destination i am able to find one single route. But as in google maps, we have a suggested routes option which the same i need to implement but i failed with all my tries. Please find the below code(Working eg. which shows single route between a source and destination). Please guide if i have missed something. Thanks in advance

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Chart</title>
<style>
html,body,#map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
}

#panel {
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -180px;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
}
</style>
<script
    src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script> var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map;  
function initialize() 
{   
    directionsDisplay = new google.maps.DirectionsRenderer();   
    var delhi = new google.maps.LatLng(28.6168, 77.2434);  
     var mapOptions = 
         {     
             zoom: 6,     
             mapTypeId: google.maps.MapTypeId.ROADMAP,     
             center: delhi   
         }  
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);   
      directionsDisplay.setMap(map); }  function calcRoute() {  
      var start = document.getElementById('start').value;   
      var end = document.getElementById('end').value;  
       var waypts = [];   
       var checkboxArray = document.getElementById('waypoints');   
       for (var i = 0; i < checkboxArray.length; i++) 
           {     if (checkboxArray.options[i].selected == true) 
               {       
               waypts.push({           
               location:checkboxArray[i].value,           
               stopover:true});     
               }   
           }    
       var request = 
           {       
               origin: start,       
               destination: end,       
               waypoints: waypts,       
               optimizeWaypoints: true,       
               travelMode: google.maps.TravelMode.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');       
                            summaryPanel.innerHTML = '';       // For each route, display summary information.      
                            for (var i = 0; i < route.legs.length; i++) 
                            {        
                                var routeSegment = i + 1;        
                                summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>';        
                                summaryPanel.innerHTML += route.legs[i].start_address + ' to ';        
                                summaryPanel.innerHTML += route.legs[i].end_address + '<br>';         
                                summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';      
                            }     
}   }); 
}  google.maps.event.addDomListener(window, 'load', initialize);      </script>
</head>
<body>
<div id="map-canvas" style="float: left; width: 70%; height: 100%;"></div>
<div id="control_panel"
    style="float: right; width: 30%; text-align: left; padding-top: 20px">
<div style="margin: 20px; border-width: 2px;"><b>Loco Journey Start Station:</b> <select
    id="start">
    <option value="Tughlakabad">Panvel</option>
    <option value="Lucknow">Lucknow</option>
    <option value="Firozpur">Firozpur</option>
    <option value="Ghaziabad">Ghaziabad</option>
</select> <br>
<b>Journey:</b> <br>
<i>(Ctrl-Click for multiple selection)</i> <br>
<select multiple id="waypoints">
    <option value="Bhopal">Bhopal</input>
    <option value="Raipur">Raipur</input>
    <option value="Farukkhabad">Farukkhabad</input>
    <option value="Jhansi">Jhansi</input>
</select> <br>
<b>Loco Journey End Station:</b> <select id="end">
    <option value="Lucknow">Lucknow</option>
    <option value="Firozpur">Firozpur</option>
    <option value="Ghaziabad">Ghaziabad</option>
    <option value="Tughlakabad">Tughlakabad</option>
</select> <br>
<input type="submit" onclick="calcRoute();"></div>
<div id="directions_panel"
    style="margin: 20px; background-color: #FFEE77;"></div>
</div>
</body>
</html>

Upvotes: 0

Views: 3428

Answers (1)

geocodezip
geocodezip

Reputation: 161404

from the documentation:

provideRouteAlternatives (optional) when set to true specifies that the Directions service may provide more than one route alternative in the response. Note that providing route alternatives may increase the response time from the server.

example

var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.DirectionsTravelMode.DRIVING,
    provideRouteAlternatives: true
};

Upvotes: 3

Related Questions