<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Waypoints in directions</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&signed_in=true"></script> <script> var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); var chicago = new google.maps.LatLng(3.4158029, -76.5069889); var mapOptions = { zoom: 6, center: chicago } 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 }; console.log(request); 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>Start:</b> <select id="start"> <option value="Cra. 50, Bogotá, Colombia">Cra. 50, Bogotá, Colombia</option> </select> <br> <b>Waypoints:</b> <br> <i>(Ctrl-Click for multiple selection)</i> <br> <select multiple id="waypoints"> <option value="Cra. 60, Bogotá, Colombia">Cra. 60, Bogotá, Colombia</option> <option value="Cra. 70, Bogotá, Colombia">Cra. 70, Bogotá, Colombia</option> </select> <br> <b>End:</b> <select id="end"> <option value="Cra. 80, Bogotá, Colombia">Cra. 80, Bogotá, Colombia</option> </select> <br> <input type="submit" onclick="calcRoute();"> </div> <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div> </div> </body> </html>
Comentarios
Publicar un comentario