How to give directions?

I am creating a website which includes a map to show the location of the restaurant, however, I want to add functionality to the site which lets the user select a button to get directions from their geolocation or current location if on mobile to the restaurants location and display it on the page.

My mock up of the map is like so:

    <main role="main" class="container bg-content">
    <h1 class="head-font text-center">Where are we</h1>

    <div class="row margin">
        <div class="col">
            <div id="map"></div>
            <script>
              function initMap() {
                var restaurant = {lat: 54.772373, lng: -6.526826};  
                var options = {
                    zoom: 14,
                    center: restaurant,
                    disableDoubleClickZoom: true,
                    draggable: true,
                    fullscreenControlOptions: true
                };

                var map = new google.maps.Map(document.getElementById('map'), options);

                var contentString = '<div class="col">' +
                                        '<div class="row">' +
                                            '<h1><p style="padding-left: 20px;">Our location</p></h1>' +
                                        '</div>' +
                                        '<div class="col">' +
                                            '<div class="row"' +
                                                '<p>116 Hillhead Rd, Castledawson, Magherafelt, BT45 8ET</p>' +
                                            '</div>' +
                                            '<div class="row"' +
                                                '<h2 class="active-item">Phone us: </h2>' +
                                                '<p style="padding-left: 5px;"><a href="tel:028 7946 8322"> 028 7946 8322</a></p>' +
                                            '</div>' +
                                        '</div>' +
                                    '</div>';


                var infowindow = new google.maps.InfoWindow({
                    content: contentString
                });

                var marker = new google.maps.Marker({
                  position: restaurant,
                  map: map,
                  maxWidth: 400,
                  title: 'The Old Thatch Inn'
                });

                marker.addListener('click', function() {
                    infowindow.open(map, marker);
                });
          }
            </script>
            <script async defer
                    src="http://ift.tt/2ifXaWD">
            </script>     
        </div>
    </div>

    <div class="row margin">
        <div class="col">
            <button type="button" class="btn btn-info btn-sm">Get directions to us</button>
        </div>
    </div>
</main>

I am new to Javascript and know the basics of it, just not sure how to go about things with this. Any help or guidance is appreciated. The directions will should display below the map itself