Google Maps API v3 JS map.fitbounds

I've run into a bit of a problem while using map.fitbounds. I am passing two points on a map and using the directions service along side this. I am using map.fitbounds to center the map between the two given points but have run into a problem where the map actually ends up showing the world view for this particular part of code:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    window.addEvent('domready', function() {    
        initialize();
    });

    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var currentDirections = null;

    var clat = 52.03574;
    var clng = 0.58363;
    var dlat = 51.08577;
    var dlng = -1.31712;

    function initialize() 
    {
        var mOptions = {
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map($("mapCanvas"), mOptions);

        directionsDisplay = new google.maps.DirectionsRenderer({
            'map': map,
            'preserveViewport': true,
            '开发者_运维问答draggable': true//,
            //'suppressMarkers': true
        });
        directionsDisplay.setPanel($("directions_panel"));

        google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
            currentDirections = directionsDisplay.getDirections();
        });

        var start = 'Little Yeldham, Halstead, Essex CO9 4JZ, UK';
        var end = 'Winchester, Hampshire SO21, UK';
        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING,
            unitSystem: google.maps.DirectionsUnitSystem.IMPERIAL
        };
        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setMap(map);
                directionsDisplay.setDirections(response);
            }
        });

        var collectionPoint = new google.maps.LatLng(clat, clng);
        var deliveryPoint = new google.maps.LatLng(dlat, dlng);
        var bounds = new google.maps.LatLngBounds(collectionPoint, deliveryPoint);
        map.fitBounds(bounds);
    }

</script>

Can anyone help or point me in the right direction how to simply display the correct display distance?

---

EDIT: Just found this post with a similar issue. So a possible solution is to create an empty bounds and start extending it.

My own code looks like this:

var bounds = new google.maps.LatLngBounds();
for(var i=0;i<this.markers.length;i++){
    bounds.extend(this.markers[i].getPosition());
}
this.map.fitBounds(bounds);

---

I've been having the exact same problem in some scenarios. Inverting the points order has temporarily fixed the problem for me, but I still haven't found out what the real problem is or if it's a GMaps API bug.

Have you had any luck?