¿Opción de rutas sugeridas en la API de Google Maps?
Tengo el requisito de mostrar múltiples rutas entre el origen y el destino. Por ejemplo: si estoy seleccionando una fuente y un destino, puedo encontrar una sola ruta. Pero al igual que en los mapas de Google, tenemos una opción de rutas sugeridas que es la misma que necesito implementar pero fallé en todos mis intentos. Encuentre el siguiente código (por ejemplo, Trabajo que muestra una ruta única entre un origen y un destino). Por favor guíe si me he perdido algo. Gracias por adelantado
<!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>