zoom not working with google api map containing dr

This question already has an answer here:

Do not change map center or zoom level when rendering directions 1 answer

I've got an html page containing a map showing a route from a church to a wedding reception. The map also has:

Six markers, each with an infowindow to show nearby hotels
The Start and Destination markers for the route replaced by custom icons.

It all works really well except that no matter what I set the zoom to, it is ignored - I have to manually change the zoom to fit the markers in on the web page. I've tried various solutions, including SetZoom and map.fitBounds, I have scoured various resources but I can't see why the zoom is failing to work.

Any ideas? Thanking everyone who contributes to StackOverflow.... Here is the script.

<script type="text/javascript">
// Global variables
var map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var hotelwindow = new google.maps.InfoWindow();


function initialize() {
var latlng = new google.maps.LatLng(51.6529575,0.0644311);
var options = {
zoom: 8,
center: latlng, 
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [ 
{ 
featureType: "poi", 
stylers: [ 
{ visibility: "off" } 
] 
} 
],
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_CENTER
},
};
// create the map
map = new google.maps.Map(document.getElementById('map'),options); 
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap (map);
directionsDisplay.setOptions( { suppressMarkers: true } );
} //end of function initialize

function calcRoute() {
var start = new google.maps.LatLng(51.6529575,0.0644311);
var end = new google.maps.LatLng(51.6502, 0.0027);

var churchcontent = '<div id="churchcontent">'+
'<div id="siteNotice">'+
'</div>'+
'<div id="bodyContent">'+
'<Strong>St Johns Church</strong>'+
'<p>Church Lane Loughton Essex IG10 1PD <br />' +
'Ceremony begins: 3.00 pm</p>'+
'<img src="images/stjohns_small.jpg"/> '+
'</div>'+
'</div>';

 var whitehousecontent = '<div id="whitehousecontent">'+
'<div id="bodyContent">'+
'<Strong>The White House</strong>'+
'<p>Epping Forest, London, E4 7QW </p>' +
'<img src="images/thewhitehouse_small.jpg"/> '+
'</div>'+
'</div>';

 var request = {
 origin: start,
   destination: end,
   travelMode: google.maps.DirectionsTravelMode.DRIVING
 };

 var churchinfo = new google.maps.InfoWindow({
 content: churchcontent
 });
 var startmarker = new google.maps.Marker({ position: start, map: map, icon: 'images/icon_church_yellow.png', title:'St Johns Church IG10 1PD'  });
 google.maps.event.addListener(startmarker, 'click', function() {
 churchinfo.open(map,startmarker);
  });


  var whitehouseinfo = new google.maps.InfoWindow({
  content: whitehousecontent
   }); 
  var stopmarker = new google.maps.Marker({ position: end, map: map, icon: 'images/wedding-receptions.png', title:'The White House E4 7QW' }); 
  google.maps.event.addListener(stopmarker, 'click', function() {
    whitehouseinfo.open(map,stopmarker);
  }); 

  directionsService.route (request, function (result, status) {
   if (status == google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(result);
     } else {
            alert ("Directions was not successful because " + status);
            }
   });

  }  

 // marker locations for hotels:
var hotels = [
['Premier Inn Chingford', 51.6342071,0.017014, 1,      '<Strong><a href="http://www.premierinn.com/en/hotel/CHIRAN/chingford">Premier Inn Chingford</a></strong> <br />Rangers Road, E4 7QH, 0871 527 9386<br /><img src="images/premierinnchingford_small.jpg"/>'],
['Premier Inn Loughton', 51.6256462,0.0320807, 2,'Premier Inn Loughton'],
['County Hotel', 51.6031251,0.0109187, 3,'County Hotel'],
['Packfords Hotel', 51.6086696,0.0262226, 4,'Packfords Hotel'],
['Kings Oak Hotel', 51.6642738,0.0399808, 5,'Kings Oak Hotel'],
['Ridgeway Hotel', 51.6267637,-0.0096563, 6,'Ridgeway Hotel']
];

function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var hotel = locations[i];
var myLatLng = new google.maps.LatLng(hotel[1], hotel[2]);
var hwcontent = hotel[4];
var mytitle = hotel[0];
createmarker(myLatLng, mytitle,hwcontent);

} 
google.maps.event.addListener(marker, 'click', function () {
hotelwindow.setContent(iwContent);
hotelwindow.open(map, marker);
});
} // end of setMarkers function  


function createmarker(latlon,title,iwContent) {
var image = {
url: 'images/hotel.png',
// This marker is 32 pixels wide by 37 pixels tall.
size: new google.maps.Size(32, 37),
// The origin for this image is 0,0.
origin: new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,37.
anchor: new google.maps.Point(0, 37)
};
var shape = {
coord: [1, 1, 1, 30, 25, 30, 25 , 1],
type: 'poly'
};
var marker = new google.maps.Marker({
position: latlon,
title: title,
icon: image,
shape: shape,
map: map
});
}  //end of createmarker

function startmap() {
initialize();
calcRoute();
setMarkers(map, hotels);
}
</script>

set the preserveViewport option of the DirectionsRenderer if you don't want it to zoom to fit the directions.

preserveViewport | boolean | By default, the input map is centered and zoomed to the bounding box of this set of directions. If this option is set to true, the viewport is left unchanged, unless the map's center and zoom were never set.