anchor.diff:      <b>Mode of Travel: </b>
       <input id="address" type="textbox" value="Lviv">
       <input type="button" value="Geocode" onclick="codeAddress()">
  +    <br>
  +    <input id="start" type="textbox" value="Lviv Svobody">
  +    <input id="end" type="textbox" value="Lviv Saharova 23">
   
  -    <select id="mode" onchange="calcRoute();">
  +    <select id="mode" onchange="">
           <option value="DRIVING">Driving</option>
           <option value="WALKING">Walking</option>
           <option value="BICYCLING">Bicycling</option>
           <option value="TRANSIT">Transit</option>
       </select>
  +    <input type="button" value="Way" onclick="calcRoute();">
   </div>
  +<div id="directions-panel"></div>
   <div id="map-canvas"></div>
   </body>
   </html>
positive.code:         var oceanBeach = new google.maps.LatLng(${to_x}, ${to_y});
  
          function initialize() {
              directionsDisplay = new google.maps.DirectionsRenderer();
              geocoder = new google.maps.Geocoder();
              var mapOptions = {
                  zoom: 14,
                  center: haight
              }
              map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
              directionsDisplay.setMap(map);
  
  
           //   var latlng = new google.maps.LatLng(-34.397, 150.644);
  //            var mapOptions = {
  //                zoom: 8,
  //                center: latlng
  //            }
  //            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
          }
  
          function calcRoute() {
              var selectedMode = document.getElementById('mode').value;
              var request = {
                  origin: haight,
                  destination: oceanBeach,
                  travelMode: google.maps.TravelMode[selectedMode]
              };
              directionsService.route(request, function (response, status) {
  
negative.code:         }
  
          #panel {
              position: relative;
              top: 5px;
              left: 50%;
              margin-left: -400px;
              z-index: 5;
              background-color: #fff;
              padding: 5px;
              border: 1px solid #999;
          }
  
          #directions-panel {
              height: 100%;
              float: right;
              width: 390px;
              overflow: auto;
          }
  
          #map-canvas {
              margin-right: 400px;
          }
  
          #control {
              background: #fff;
              padding: 5px;
              font-size: 14px;
              font-family: Arial;
              border: 1px solid #ccc;
              box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
              display: none;
          }
  
          @media print {
              #map-canvas {
                  height: 500px;
                  margin: 0;
              }
  
              #directions-panel {
                  float: none;
                  width: auto;
              }
          }
      </style>
      <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
  