How to draw on google maps from point A to point B with specific location?

How to point on google maps from point A to point  B with specific location?

Here is the google maps in order to point from start location to our destination on google maps include they draw on road:

HTML

        <div id="floating-panel">

   <b>Mode of Travel: </b>
   <select id="mode">
     <option value="DRIVING">Driving</option>
     <option value="WALKING">Walking</option>
     <option value="BICYCLING">Bicycling</option>
     <option value="TRANSIT">Transit</option>
   </select>
   </div>
   <div id="map"></div>

         </div>

CSS

<style>

 #map {
        width:100%;
        height: 650px;
      }
     #floating-panel {
       position: absolute;
       top: 10px;
       left: 25%;
       z-index: 5;
       background-color: #fff;
       padding: 5px;
       border: 1px solid #999;
       text-align: center;
       font-family: 'Roboto','sans-serif';
       line-height: 30px;
       padding-left: 10px;
     }
</style>

JavaScript 

<script>

      function initMap() {
              var start_long = "104.4545";
var start_lat = "11.2132";
var s_longs = "104.4545";
        var directionsDisplay = new google.maps.DirectionsRenderer;
        var directionsService = new google.maps.DirectionsService;
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 14,
          center: {lat: 37.77, lng: -122.447}
        });
        directionsDisplay.setMap(map);
        calculateAndDisplayRoute(directionsService, directionsDisplay);
        document.getElementById('mode').addEventListener('change', function() {
          calculateAndDisplayRoute(directionsService, directionsDisplay);
        });
      }
      function calculateAndDisplayRoute(directionsService, directionsDisplay) {
              var start_long = "104.1252";
var start_lat = "11.1254";
var s_longs = parseFloat(start_long);
var s_lat = parseFloat(start_lat);
var end_long = "104.2358";
var end_lat = "11.1245";
var e_longs = parseFloat(end_long);
var e_lat = parseFloat(end_lat);
        var selectedMode = document.getElementById('mode').value;
        directionsService.route({
          origin: {lat:s_lat, lng: s_longs },  // Haight.
          destination: {lat:e_lat , lng: e_longs},  // Ocean Beach.
          // Note that Javascript allows us to access the constant
          // using square brackets and a string value as its
          // "property."
          travelMode: google.maps.TravelMode[selectedMode]
        }, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY&callback=initMap">
    </script>