Javascript 谷歌地图放大方向点

我有一个谷歌地图，我在地图上显示两点之间的方向，我试图

适应地图的边界。
这两点在地图上显示正确，但我无法使其符合边界

这是我的设置：

#map
  width: 100%
  height: 400px

<div id="map"></div>

我也试过：

directionsDisplay = new google.maps.DirectionsRenderer({
        preserveViewport: true
    });

有什么办法可以实现吗

更新1

我之前没有提到我在动态选项卡中有地图：

$(function() {

    //show new panel function
    function ShowNewPanel(theLink, theTab, thePane) {
        //activate new pane
        theTab.find('.tab-pane-show.active').fadeOut(200, function() {
            $(this).removeClass('active');
            $(thePane).fadeIn(200, function() {
                $(this).addClass('active');
            });
        });

        //activate new link
        theTab.find('.tab-nav-show li').removeClass('active');
        theTab.find('.tab-nav-show a[href="'+thePane+'"]').parent('li').addClass('active');
    }

    //Using Tab Links
    $('.tab .tab-nav-show ul li a, a.tab-anchor').on('click', function() {
        var $theLink = $(this);
        var $theTab = $theLink.closest('.tab');
        var $thePane = $theLink.attr('href');
        ShowNewPanel($theLink, $theTab, $thePane)
    });


});




<div class="tab">
  <nav class="tab-nav-show">
    <ul>
      <li><a href="#details">Details</a></li>
      <li><a href="#map-location">Location</a></li>
      <li><a href="#comments">Comments</a></li>
    </ul>
  </nav>
</div>

  <div class="tab-pane-show" id="map-location">
    <div id="map"></div>
  </div>

$（函数（）{
//显示新面板功能
功能显示新建面板（链接、选项卡、平面）{
//激活新窗格
tab.find（'.tab窗格show.active'）.fadeOut（200，函数（）{
$（this.removeClass（'active'）；
$（thePane）.fadeIn（200，function（）{
$（this.addClass（'active'）；
});
});
//激活新链接
tab.find（'.tab nav show li'）.removeClass（'active'）；
tab.find（'.tab导航显示a[href=“'+thePane+''“]”）。parent（'li'）。addClass（'active'）；
}
//使用选项卡链接
$（'.tab.tab导航显示ul li a，a.tab-anchor'）。打开（'单击'，函数（）{
var$theLink=$（此）；
变量$theTab=$theLink.closest（'.tab'）；
var$thePane=$theLink.attr（'href'）；
ShowNewPanel（$theLink、$theTab、$thePane）
});
});





您可以尝试使用
LatLngBounds
对象-向其添加所需的点，然后调用
fitBounds
方法

var handler = Gmaps.build('Google');
handler.buildMap({ internal: {id: 'map'}}, function(){
    var bounds = new google.maps.LatLngBounds();
    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer();
    var METERS_TO_MILES = 0.000621371192;

    directionsDisplay.setMap(handler.getMap());
    var request = {
        origin:      new google.maps.LatLng(<%=@origin%>),
        destination: new google.maps.LatLng(<%=@destination%>),
        travelMode:  google.maps.TravelMode.WALKING,

    };
    bounds.extend( request.origin );
    bounds.extend( request.destination );

    directionsService.route(request, function(response, status) {
        if (status === google.maps.DirectionsStatus.OK) {
            var totaldistance = 0;
            var route = response.routes[0];
            // display total distance information.
            for (var i = 0; i < route.legs.length; i++) {
                totaldistance = totaldistance + route.legs[i].distance.value;
            }
            document.getElementById('distance').innerHTML += "<strong>Total walking distance is " + ((totaldistance * METERS_TO_MILES * 10) / 10).toFixed(2) + " miles</strong>";
            directionsDisplay.setDirections(response);
            map.fitBounds( bounds );
        }
    });

});

var handler=Gmaps.build（'Google'）；
buildMap（{internal:{id:'map'}}，function（）{
var bounds=new google.maps.LatLngBounds（）；
var directionsService=new google.maps.directionsService（）；
var directionsDisplay=new google.maps.DirectionsRenderer（）；
var METERS_至_MILES=0.000621371192；
directionsDisplay.setMap（handler.getMap（））；
var请求={
来源：新的google.maps.LatLng（），
目的地：新建google.maps.LatLng（），
travelMode:google.maps.travelMode.WALKING，
};
扩展（request.origin）；
扩展（request.destination）；
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
var totaldistance=0；
var route=response.routes[0]；
//显示总距离信息。
对于（var i=0；i总步行距离为”+（（总距离*米到英里*10）/10）。toFixed（2）+“英里””；
方向显示。设置方向（响应）；
映射边界（bounds）；
}
});
});
谢谢@RamRaider的回复。我尝试了你的建议，但不幸的是它不符合你的要求。。。我没有提到我有一个动态标签内的地图，我更新了我的问题与更多的信息。也许它与此有关？
TypeError:map.fitBounds不是一个函数。（在“map.fitBounds（bounds）”中，“map.fitBounds”未定义）
它需要对map对象的引用-无论调用什么对不起，我该怎么做？如果您的意思是
handler.fitBounds（bounds）但仍然无法识别。请提供一个示例来说明您的问题。
$(function() {

    //show new panel function
    function ShowNewPanel(theLink, theTab, thePane) {
        //activate new pane
        theTab.find('.tab-pane-show.active').fadeOut(200, function() {
            $(this).removeClass('active');
            $(thePane).fadeIn(200, function() {
                $(this).addClass('active');
            });
        });

        //activate new link
        theTab.find('.tab-nav-show li').removeClass('active');
        theTab.find('.tab-nav-show a[href="'+thePane+'"]').parent('li').addClass('active');
    }

    //Using Tab Links
    $('.tab .tab-nav-show ul li a, a.tab-anchor').on('click', function() {
        var $theLink = $(this);
        var $theTab = $theLink.closest('.tab');
        var $thePane = $theLink.attr('href');
        ShowNewPanel($theLink, $theTab, $thePane)
    });


});




<div class="tab">
  <nav class="tab-nav-show">
    <ul>
      <li><a href="#details">Details</a></li>
      <li><a href="#map-location">Location</a></li>
      <li><a href="#comments">Comments</a></li>
    </ul>
  </nav>
</div>

  <div class="tab-pane-show" id="map-location">
    <div id="map"></div>
  </div>

var handler = Gmaps.build('Google');
handler.buildMap({ internal: {id: 'map'}}, function(){
    var bounds = new google.maps.LatLngBounds();
    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer();
    var METERS_TO_MILES = 0.000621371192;

    directionsDisplay.setMap(handler.getMap());
    var request = {
        origin:      new google.maps.LatLng(<%=@origin%>),
        destination: new google.maps.LatLng(<%=@destination%>),
        travelMode:  google.maps.TravelMode.WALKING,

    };
    bounds.extend( request.origin );
    bounds.extend( request.destination );

    directionsService.route(request, function(response, status) {
        if (status === google.maps.DirectionsStatus.OK) {
            var totaldistance = 0;
            var route = response.routes[0];
            // display total distance information.
            for (var i = 0; i < route.legs.length; i++) {
                totaldistance = totaldistance + route.legs[i].distance.value;
            }
            document.getElementById('distance').innerHTML += "<strong>Total walking distance is " + ((totaldistance * METERS_TO_MILES * 10) / 10).toFixed(2) + " miles</strong>";
            directionsDisplay.setDirections(response);
            map.fitBounds( bounds );
        }
    });

});