My Google Maps Directions API doesn't show up on my website

I'm trying to use Google maps direction API on my website. For the first time it was running well, but I don't know why it isn't anymore. Here's my JavaScript code :

<script>
$(document).ready(function() {
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var tengah = new google.maps.LatLng(-7.333333300000000000,108.200000000000050000);
var posisi_saya;
var posisi_kuliner = new google.maps.LatLng(<?php echo $wisataDetail['latitude']; ?>, <?php echo $wisataDetail['longitude']; ?>);

function initialize() {
            if (navigator.geolocation) { 
            var timeoutVal = 10 * 1000 * 1000;
            function getPos(position) {   

                    // get latitude and longitude
                    var latitude = position.coords.latitude;
                    var longitude = position.coords.longitude;
                    posisi_saya = latitude + "," + longitude;

                    // send starting location and destination to goToGoogleMaps function
                    calcRoute(posisi_saya, posisi_kuliner);

                }
            function Eror(error) {
            var errors = { 
                1: 'Permission denied',
                2: 'Position unavailable',
                3: 'Request timeout'
                };
                alert("Error: " + errors[error.code]);
                }                   
                // get user's current position
                navigator.geolocation.getCurrentPosition(getPos,Eror,{ accuracy : 1200.4, enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0 });
            }

            // fallback for browsers without geolocation
            else {

                // get manually entered postcode
                posisi_saya = $('.manual-location').val();

                // if user has entered a starting location, send starting location and destination to goToGoogleMaps function
                if (posisi_saya != '') {
                    calcRoute(posisi_saya, posisi_kuliner);
                }
                // else fade in the manual postcode field
                else {
                    $('.no-geolocation').fadeIn();
                }

            }


directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 14,
center: tengah
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);

function calcRoute(posisi_saya, posisi_kuliner) {

var selectedMode = document.getElementById('mode').value;

var request = {
  origin: posisi_saya,
  destination: posisi_kuliner,
  // Note that Javascript allows us to access the constant
  // using square brackets and a string value as its
  // "property."
  travelMode: google.maps.TravelMode[selectedMode]
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
  directionsDisplay.setDirections(response);
}
});
}
}

google.maps.event.addDomListener(window, 'load', initialize);
});
</script>

And here's my HTML code :

<p><b>Mode Perjalanan: </b>
<select id="mode" onchange="calcRoute();" class="form-control">
  <option value="DRIVING">Berkendara</option>
  <option value="WALKING">Berjalan kaki</option>
  <option value="BICYCLING">Sepeda</option>
  <option value="TRANSIT">Transit</option>
</select>
<br></p>
<div id="map-canvas"></div>

I can't figure out the problem.