Google map fitbounds

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <script src="http://maps.googleapis.com/maps/api/js"></script>
    <script data-require="jquery" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
  <div id="googleMap" style="width:850px;height:550px;"></div>
  <p>
    I would like to have the bouncing marker in the center, 
    then adjust the maps bounds and a zoom level based on that, 
    and at the same time have all the markers visible.
  </p>
  </body>

</html>

// Add your javascript here
$(function() {

});

function initialize() {
  var userCenter = new google.maps.LatLng(51.508742, -0.120850);

  var userCenterMarker = new google.maps.Marker({
    position: userCenter
  });
  userCenterMarker.setAnimation(google.maps.Animation.BOUNCE);

  var mapProp = {
    center: userCenter,
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

  var bounds = new google.maps.LatLngBounds();
  var markers = getMarkers();
  $(markers).each(function() {
    bounds.extend(this.position);
    this.setMap(map);
  });

  userCenterMarker.setMap(map);
  map.fitBounds(bounds);
  setTimeout(function() {
    map.setCenter(userCenter);
  }, 1500);

  /*TODO:
  How can i set the map center to the bouncing marker and zoom out or in so that all other markers are visible?
  fitBounds centers/zooms to fit the markers in getMarkers()
  Including userCenterMarker in the bounds doesn't help
  */
}


function getMarkers() {
  var m1 = new google.maps.Marker({
    position: new google.maps.LatLng(51.494834, -0.075445)
  });
  var m2 = new google.maps.Marker({
    position: new google.maps.LatLng(51.483718, -0.050039)
  });
  var m3 = new google.maps.Marker({
    position: new google.maps.LatLng(51.467022, -0.025921)
  });
  var m4 = new google.maps.Marker({
    position: new google.maps.LatLng(51.465525, -0.022831)
  });
  var m5 = new google.maps.Marker({
    position: new google.maps.LatLng(51.462069, -0.143166)
  });
  var m6 = new google.maps.Marker({
    position: new google.maps.LatLng(51.455224, -0.169945)
  });
  var m7 = new google.maps.Marker({
    position: new google.maps.LatLng(51.442386, -0.252342)
  });
  var m8 = new google.maps.Marker({
    position: new google.maps.LatLng(51.442386, -0.106087)
  });
  var markers = [m1, m2, m3, m4, m5, m6, m7, m8];
  return markers;
}


google.maps.event.addDomListener(window, 'load', initialize);

/* Put your css in here */

h1 {
  color: red;
}