javascript - Google Maps API: クリックすると地図の幅が変更されますが、ルートは元の幅で読み込まれます

Question

Google Maps API v3 を介して読み込まれたマップがあります。onclick が 2 つのアクションを実行するフォームがあります。1) 関数を呼び出して Google トランジット経由でルートを計算し、2) マップの幅を減らします。

<form>
    <input type="text" id="start" name="start">
    <input type="button" onclick="reducemap();calcRoute();" value="Go">
</form>

function reducemap() {
document.getElementById("map-canvas").style.width="620px";
}

function calcRoute() {
    var start = document.getElementById('start').value;
      var end = "An Address in Rome";
      var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.TRANSIT
      };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
}

それは魅力のように機能しますが、元の幅 (縮小された幅ではなく) で計算されるため、ルートが中央に配置されないという唯一の問題があります。これはここでライブで見ることができます (コードを見ることができます: http://goo.gl/wr3qi )。