javascript - Googlemaps ルーティング、青色のルーティング ラインが地図に表示されない

Question

私は Java Script が初めてで、簡単な問題があります。Googlemaps API (TransitLayer) を使用してルーティングを行っています。ルーティングは機能し、方向パネルは正常に作成されましたが、残念ながら青いルーティング ラインがマップに表示されません。おそらく、マップの非同期初期化に関係しています。(コールバック関数) 以下の私の JavaScript 関数と、私のページへのリンク: 私のウェブサイト(タブ 2: ルーティング) を参照してください。

どんな助けでも大歓迎です。

---

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
routingcounter = 0;
var routingmap;
var mapOptions;

function initialize_routing() {
  directionsDisplay = new google.maps.DirectionsRenderer();
   mapOptions = {
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(51.510799, -0.134332)
  };
    routingmap = new google.maps.Map(document.getElementById('mycanvas'),
      mapOptions);
  directionsDisplay.setMap(routingmap);
  directionsDisplay.setPanel(document.getElementById('directions-panel'));

  var transitLayer = new google.maps.TransitLayer();
  transitLayer.setMap(routingmap);

}


function loadScript() {

  if(routingcounter == 0)
  {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize_routing";
  document.body.appendChild(script);
  routingcounter++;
  }

}


function compute_route()
{


    var start = $('from').value;
    var over = $('over').value;
    var waypts = [];

    var end = $('to').value;

    if ($('from').value == "" || $('to').value=="")
    {
        alert("Fill in From- and To-Textfields! Try again!");
        return;
    }

    start += ",London"

    end += ",London"

    if($('over').value == "")
    {
        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.TravelMode.TRANSIT
        };
    }
    else
    {
        over += ",London"

        waypts.push({
          location:over,
          stopover:true
      });


        var request = {
            origin: start,
            destination: end,
            waypoints: waypts,
            optimizeWaypoints: true,
            travelMode: google.maps.TravelMode.TRANSIT
        };
    }




  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) 
    {
      directionsDisplay.setDirections(response);
    }
    else
    {
        alert("No matching places found. Retry please!");
        $('from').value == "";
        $('over').value == "";
        $('to').value == "";

    }
  });




}

    google.maps.event.addDomListener(window, 'load', initialize_routing);