<span style="font-weight:bold;color:#00008b;">const</span><br>
<span style="font-style:italic;color:#008000;">{ Was used sample from }</span><br>
<span style="font-style:italic;color:#008000;">{ https://developers.google.com/maps/documentation/javascript/examples/directions-panel }</span><br>
cRoute =<br>
<span style="color:#0000ff;">'<!DOCTYPE html>'</span><br>
+ <span style="color:#0000ff;">'<html>'</span><br>
+ <span style="color:#0000ff;">' <head>'</span><br>
+ <span style="color:#0000ff;">' <meta name="viewport" content="initial-scale=1.0, user-scalable=no">'</span><br>
+ <span style="color:#0000ff;">' <meta charset="utf-8">'</span><br>
+ <span style="color:#0000ff;">' <title>Displaying text directions with <code>setPanel()</code></title>'</span><br>
+ <span style="color:#0000ff;">' <style>'</span><br>
+ <span style="color:#0000ff;">' html, building, #map-canvas {'</span><br>
+ <span style="color:#0000ff;">' height: 100%;'</span><br>
+ <span style="color:#0000ff;">' margin: 0px;'</span><br>
+ <span style="color:#0000ff;">' padding: 0px'</span><br>
+ <span style="color:#0000ff;">' }'</span><br>
+ <span style="color:#0000ff;">' #panel {'</span><br>
+ <span style="color:#0000ff;">' position: absolute;'</span><br>
+ <span style="color:#0000ff;">' top: 5px;'</span><br>
+ <span style="color:#0000ff;">' left: 50%;'</span><br>
+ <span style="color:#0000ff;">' margin-left: -180px;'</span><br>
+ <span style="color:#0000ff;">' z-index: 5;'</span><br>
+ <span style="color:#0000ff;">' background-color: #fff;'</span><br>
+ <span style="color:#0000ff;">' padding: 5px;'</span><br>
+ <span style="color:#0000ff;">' border: 1px solid #999;'</span><br>
+ <span style="color:#0000ff;">' }'</span><br>
+ <span style="color:#0000ff;">' </style>'</span><br>
+ <span style="color:#0000ff;">' <style>'</span><br>
+ <span style="color:#0000ff;">' #directions-panel {'</span><br>
+ <span style="color:#0000ff;">' height: 100%;'</span><br>
+ <span style="color:#0000ff;">' float: right;'</span><br>
+ <span style="color:#0000ff;">' width: 30%;'</span><br>
+ <span style="color:#0000ff;">' overflow: auto;'</span><br>
+ <span style="color:#0000ff;">' }'</span><br>
+ <span style="color:#0000ff;">''</span><br>
+ <span style="color:#0000ff;">' #map-canvas {'</span><br>
+ <span style="color:#0000ff;">' margin-right: 4px;'</span><br>
+ <span style="color:#0000ff;">' }'</span><br>
+ <span style="color:#0000ff;">''</span><br>
+ <span style="color:#0000ff;">' #control {'</span><br>
+ <span style="color:#0000ff;">' background: #fff;'</span><br>
+ <span style="color:#0000ff;">' padding: 5px;'</span><br>
+ <span style="color:#0000ff;">' font-size: 14px;'</span><br>
+ <span style="color:#0000ff;">' font-family: Arial;'</span><br>
+ <span style="color:#0000ff;">' border: 1px solid #ccc;'</span><br>
+ <span style="color:#0000ff;">' box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);'</span><br>
+ <span style="color:#0000ff;">' display: none;'</span><br>
+ <span style="color:#0000ff;">' }'</span><br>
+ <span style="color:#0000ff;">''</span><br>
+ <span style="color:#0000ff;">' @media print {'</span><br>
+ <span style="color:#0000ff;">' #map-canvas {'</span><br>
+ <span style="color:#0000ff;">' height: 500px;'</span><br>
+ <span style="color:#0000ff;">' margin: 0;'</span><br>
+ <span style="color:#0000ff;">' }'</span><br>
+ <span style="color:#0000ff;">''</span><br>
+ <span style="color:#0000ff;">' #directions-panel {'</span><br>
+ <span style="color:#0000ff;">' float: none;'</span><br>
+ <span style="color:#0000ff;">' width: auto;'</span><br>
+ <span style="color:#0000ff;">' }'</span><br>
+ <span style="color:#0000ff;">' }'</span><br>
+ <span style="color:#0000ff;">' </style>'</span><br>
+ <span style="color:#0000ff;">' <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>'</span><br>
+ <span style="color:#0000ff;">' <script>'</span><br>
+ <span style="color:#0000ff;">'var directionsDisplay;'</span><br>
+ <span style="color:#0000ff;">'var directionsService = new google.maps.DirectionsService();'</span><br>
+ <span style="color:#0000ff;">''</span><br>
+ <span style="color:#0000ff;">'function initialize() {'</span><br>
+ <span style="color:#0000ff;">' directionsDisplay = new google.maps.DirectionsRenderer();'</span><br>
+ <span style="color:#0000ff;">' var mapOptions = {'</span><br>
+ <span style="color:#0000ff;">' zoom: 7,'</span><br>
+ <span style="color:#0000ff;">' center: new google.maps.LatLng(41.850033, -87.6500523)'</span><br>
+ <span style="color:#0000ff;">' };'</span><br>
+ <span style="color:#0000ff;">' var map = new google.maps.Map(document.getElementById(''map-canvas''),'</span><br>
+ <span style="color:#0000ff;">' mapOptions);'</span><br>
+ <span style="color:#0000ff;">' directionsDisplay.setMap(map);'</span><br>
+ <span style="color:#0000ff;">' directionsDisplay.setPanel(document.getElementById(''directions-panel''));'</span><br>
+ <span style="color:#0000ff;">''</span><br>
+ <span style="color:#0000ff;">' var control = document.getElementById(''control'');'</span><br>
+ <span style="color:#0000ff;">' control.style.display = ''block'';'</span><br>
+ <span style="color:#0000ff;">' map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);'</span><br>
+ <span style="color:#0000ff;">'}'</span><br>
+ <span style="color:#0000ff;">''</span><br>
+ <span style="color:#0000ff;">'function calcRoute() {'</span><br>
+ <span style="color:#0000ff;">' var start = document.getElementById(''start'').value;'</span><br>
+ <span style="color:#0000ff;">' var end = document.getElementById(''end'').value;'</span><br>
+ <span style="color:#0000ff;">' var request = {'</span><br>
+ <span style="color:#0000ff;">' origin: start,'</span><br>
+ <span style="color:#0000ff;">' destination: end,'</span><br>
+ <span style="color:#0000ff;">' travelMode: google.maps.TravelMode.DRIVING'</span><br>
+ <span style="color:#0000ff;">' };'</span><br>
+ <span style="color:#0000ff;">' directionsService.route(request, function(response, status) {'</span><br>
+ <span style="color:#0000ff;">' if (status == google.maps.DirectionsStatus.OK) {'</span><br>
+ <span style="color:#0000ff;">' directionsDisplay.setDirections(response);'</span><br>
+ <span style="color:#0000ff;">' }'</span><br>
+ <span style="color:#0000ff;">' });'</span><br>
+ <span style="color:#0000ff;">'}'</span><br>
+ <span style="color:#0000ff;">''</span><br>
+ <span style="color:#0000ff;">'google.maps.event.addDomListener(window, ''load'', initialize);'</span><br>
+ <span style="color:#0000ff;">''</span><br>
+ <span style="color:#0000ff;">' </script>'</span><br>
+ <span style="color:#0000ff;">' </head>'</span><br>
+ <span style="color:#0000ff;">' <building>'</span><br>
+ <span style="color:#0000ff;">' <div id="control">'</span><br>
+ <span style="color:#0000ff;">' <strong>Start:</strong>'</span><br>
+ <span style="color:#0000ff;">' <select id="start" onchange="calcRoute();">'</span><br>
+ <span style="color:#0000ff;">' <option value="chicago, il">Chicago</option>'</span><br>
+ <span style="color:#0000ff;">' <option value="st louis, mo">St Louis</option>'</span><br>
+ <span style="color:#0000ff;">' <option value="joplin, mo">Joplin, MO</option>'</span><br>
+ <span style="color:#0000ff;">' <option value="oklahoma city, ok">Oklahoma City</option>'</span><br>
+ <span style="color:#0000ff;">' <option value="amarillo, tx">Amarillo</option>'</span><br>
+ <span style="color:#0000ff;">' <option value="gallup, nm">Gallup, NM</option>'</span><br>
+ <span style="color:#0000ff;">' <option value="flagstaff, az">Flagstaff, AZ</option>'</span><br>
+ <span style="color:#0000ff;">' <option value="winona, az">Winona</option>'</span><br>
+ <span style="color:#0000ff;">' <option value="kingman, az">Kingman</option>'</span><br>
+ <span style="color:#0000ff;">' <option value="barstow, ca">Barstow</option>'</span><br>
+ <span style="color:#0000ff;">' <option value="san bernardino, ca">San Bernardino</option>'</span><br>
+ <span style="color:#0000ff;">' <option value="los angeles, ca">Los Angeles</option>'</span><br>
+ <span style="color:#0000ff;">' </select>'</span><br>
+ <span style="color:#0000ff;">' <strong>End:</strong>'</span><br>
+ <span style="color:#0000ff;">' <select id="end" onchange="calcRoute();">'</span><br>
+ <span style="color:#0000ff;">' <option value="chicago, il">Chicago</option>'</span><br>
+ <span style="color:#0000ff;">' <option value="st louis, mo">St Louis</option>'</span><br>
+ <span style="color:#0000ff;">' <option value="joplin, mo">Joplin, MO</option>'</span><br>
+ <span style="color:#0000ff;">' <option value="oklahoma city, ok">Oklahoma City</option>'</span><br>
+ <span style="color:#0000ff;">' <option value="amarillo, tx">Amarillo</option>'</span><br>
+ <span style="color:#0000ff;">' <option value="gallup, nm">Gallup, NM</option>'</span><br>
+ <span style="color:#0000ff;">' <option value="flagstaff, az">Flagstaff, AZ</option>'</span><br>
+ <span style="color:#0000ff;">' <option value="winona, az">Winona</option>'</span><br>
+ <span style="color:#0000ff;">' <option value="kingman, az">Kingman</option>'</span><br>
+ <span style="color:#0000ff;">' <option value="barstow, ca">Barstow</option>'</span><br>
+ <span style="color:#0000ff;">' <option value="san bernardino, ca">San Bernardino</option>'</span><br>
+ <span style="color:#0000ff;">' <option value="los angeles, ca">Los Angeles</option>'</span><br>
+ <span style="color:#0000ff;">' </select>'</span><br>
+ <span style="color:#0000ff;">' </div>'</span><br>
+ <span style="color:#0000ff;">' <div id="directions-panel"></div>'</span><br>
+ <span style="color:#0000ff;">' <div id="map-canvas"></div>'</span><br>
+ <span style="color:#0000ff;">' </building>'</span><br>
+ <span style="color:#0000ff;">'</html>'</span>;