Google Maps Directions API

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyAvBQ1Q9FjYfxdWJF6KPmO822RMMbY2w2o"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-md-6 col-sm-6">
  <input type="button" id="UbicacionPersonal" value="Mi ubicación">
</div>
<div class="col-md-6 col-sm-6">
    <input type="button" class="BotonMap" id="TrazarRuta" value="Trazar Ruta">
</div>    
<div class="col-md-12 col-sm-12" id="Mapa"></div>

CSS

#Mapa {
  height:400px;
  width:100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

$(document).ready(function () {

  function localizacion(posicion) {

    console.log(posicion.coords);

    var randomLat = Math.random(),
      randomLng = Math.random();;

    randomLat = (randomLat < 0.5) ? -1 * randomLat : randomLat - 0.5;
    randomLng = (randomLng < 0.5) ? -1 * randomLng : randomLng - 0.5;

    var latitudReal = posicion.coords.latitude,
      longitudReal = posicion.coords.longitude,
      latitud = latitudReal + randomLat/10,
      longitud = longitudReal + randomLng/10;

    //Generamos el mapa que muestre y cual será el punto central
    var map = new google.maps.Map(document.getElementById('Mapa'), {
      center: {
        lat: latitud,
        lng: longitud
      },
      zoom: 14
    });

    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(map);

    //Generamos el marcadores para señalar una posición
    var markerInicial = new google.maps.Marker({
      position: {
        lat: latitud,
        lng: longitud
      },
      title: "Ubicación estudiante"
    });

    $('#UbicacionPersonal').click(function () {

      var markerPosicionReal = new google.maps.Marker({
        position: {
          lat: latitudReal,
          lng: longitudReal
        },
        title: "Mi actual ubicación"
      });
      markerPosicionReal.setMap(map);
      map.setCenter(markerPosicionReal.getPosition());
    });

    $('#TrazarRuta').click(function () {

      directionsService.route({
        origin: markerInicial.getPosition(),
        destination: {
          lat: latitudReal,
          lng: longitudReal
        },
        travelMode: 'DRIVING'
      }, function (response, status) {
        if (status === 'OK') {
          directionsDisplay.setDirections(response);
        } else {
          window.alert('Directions request failed due to ' + status);
        }
      });
    });


    // Mostramos los marcadores en el mapa.
   ...