方向地图没有正确定心/缩放

UPDATE:我现在有一个静态解决方案，但我仍然想看看它是否可以改进。除了用于切换视图的on click事件外，所有代码都是相同的。

$(document).on('click', '.mobile-toggle a', function (e) {
    e.preventDefault();
    if (!$(this).hasClass("active")) {
        var target = $(this).attr("data-target");
        $("#results > div, .mobile-toggle a").removeClass("active");
        $(this).addClass("active");
        $("#" + target).addClass("active");
    }
    var center = dmap.getCenter();
    google.maps.event.trigger(dmap, 'resize');
    dmap.setCenter(center);
    dmap.setZoom(12);
});

这使地图正确居中，这很好。缩放效果也不错，但并不总是适合路线。有时路线太大而不适合，有时地图可能应该再放大一点。是否有任何方法来确定缩放值，应该基于路由使用?我很确定这通常应该是自己发生的，但这次似乎不是这样。

原文如下

我已经读了一堆问题/答案关于这个，但没有提供的答案似乎做什么我正在寻找。我将尽我所能解释清楚。

我正在编写一个商店定位器。在桌面上，一切看起来都很好。移动设备是我遇到困难的地方，因为一些变化的视图(显示/隐藏div)。从我所读到的，它看起来像很多人遇到了一个问题，地图是在一个隐藏的div中创建的，然后它被错误地显示(例如，地图只占用容器的左上角区域)，当div显示。

商店定位器的布局如下-在搜索位置之后，您将看到所有结果的列表视图。当你点击顶部的"地图视图"标签时，你会看到一个谷歌地图视图，上面有附近所有的商店。这很好。如果你选择一个商店并点击列表视图中的"获取路线"，你会看到一个到该商店的路线的列表视图。同样地，如果你选择一个商店并在地图视图中点击"获取方向"，你会看到一个方向地图。这在两种情况下都很好。

问题是当我在列表视图中，点击获取方向，然后从方向列表视图切换到地图视图。地图会用正确的路线绘制，并像它应该的那样填充div——然而，路线位于地图的左上角，而地图本身被放大了。例如，如果路线在费城地区，地图就会缩小，其中心通常在百慕大附近。而且每次都是在百慕大的同一个地方。

下面是列表视图和地图视图之间按下按钮的相关代码。

$(document).on('click', '.mobile-toggle a', function (e) {
    e.preventDefault();
    if (!(this).hasClass("active")) {
        var target = $(this).attr("data-target");
        $("#results > div, .mobile-toggle a").removeClass("active");
        $(this).addClass("active");
        $("#" + target).addClass("active");
    }
    google.maps.event.trigger(dmap, 'resize');
}

dmap是一个包含方向映射的全局变量，并且该映射本身在创建时分配了这两个侦听器。

google.maps.event.addListener(dmap, 'idle', function () {
    google.maps.event.trigger(dmap, 'resize');
    dmapCenter = dmap.getCenter();
});
google.maps.event.addDomListener(window, 'resize', function () {
    dmap.setCenter(dmapCenter);
});

这重新绘制地图，并确保中心保持不变，而窗口是调整大小，但地图本身仍然不集中在路线从位置A到位置b。我觉得解决方案不能太远离我已经尝试过的(基于我所读到的)，但我似乎不能得到这个工作。

抱歉，文字太多了。如果您认为有任何其他代码可能有助于回答这个问题，请告诉我。谢谢!

编辑:按要求，这是绘制地图的完整代码。

function calcRoute(start, dest) {
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer();
    var mapOptions = {
        zoom: 12,
        center: new google.maps.LatLng(lat, lng)
    };
    var map = new google.maps.Map(document.getElementById('directions-map'), mapOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('directions'));
    var request = {
        origin: start,
        destination: dest,
        travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
    dmap = map;
    dmapCenter = map.getCenter();
    google.maps.event.addListener(map, 'idle', function () {
        google.maps.event.trigger(map, 'resize');
        dmapCenter = map.getCenter();
    });
    google.maps.event.addDomListener(window, 'resize', function () {
        map.setCenter(dmapCenter);
    });
}

lat和lng为全局变量，具有搜索位置的经纬度。