Javascript GoogleMapsAPI:MapWidth在单击时调整了大小，但路线仍以原始宽度加载

我有一个通过谷歌地图API v3加载的地图。 我有一个表单，onclick执行两个操作：1）调用函数通过googletransit计算路线，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);
      }
    });
}

函数reducemap（）{
document.getElementById（“地图画布”）.style.width=“620px”；
}
函数calcRoute（）{
var start=document.getElementById（'start'）.value；
var end=“罗马的地址”；
var请求={
来源：start，
目的地:完，
travelMode:google.maps.Directions travelMode.TRANSIT
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
}
});
}

---

它就像一个符咒，唯一的问题是路线没有居中，因为它是用原始宽度（不是缩小的宽度）计算的。您可以在此处看到此live（因此您可以查看代码：）。

当您更改包含映射的DIV的大小时，还需要将此大小更改通知Maps API。因此，假设您有一个引用映射的

map

变量，您的

reducemap（）

函数可能应该是：

function reducemap() {
    document.getElementById("map-canvas").style.width = "620px";
    google.maps.event.trigger( map, "resize" );
}

---

注意：我已经尝试在onclick上反转函数，但没有任何运气（onclick=“calcRoute（）；reducemap（）；”）：-）