Fit bounds Google Maps API issue - google-maps-api-3

Question

I'm trying to show a marker on a map with set coordinates and then show the users geolocation in relation to the marker. I'm able to show both the marker and geo location (if available) on the map but the map is only positioned on the geo location. I think I need to use fitBounds to fit both markers in view but I can't get this to work. Can anyone help?
function initialize() {
var latitude = 51.5039713;
var longitude = -0.114518;
var mapCanvas = document.getElementById('map-directions');
var center = new google.maps.LatLng(latitude, longitude);
var zoom = 18;
var mapOptions = {
center: center,
zoom: zoom,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
var map = new google.maps.Map(mapCanvas, mapOptions)
marker = new google.maps.Marker({
map:map,
animation: google.maps.Animation.DROP,
position: center,
icon: '/pickup.png'
});
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var bounds = new google.maps.LatLngBounds();
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var geolocation = new google.maps.Marker({position: pos, map: map, title: 'Your geolocation', });
bounds.extend(geolocation.getPosition());
map.fitBounds(bounds);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}

Answer 1

initialize the bounds with the position of marker as argument:
var bounds = new google.maps.LatLngBounds(center);
Related to the comment:
To have both markers in viewport but 1 in center you may:
create a circle` with:
pos as `center
the distance between pos and center as radius
call map.fitBounds() by using the bounds of the circle as argument
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude),
circle = new google.maps.Circle({center:pos,
radius: google.maps.geometry.spherical.computeDistanceBetween(pos,center)}),
geolocation = new google.maps.Marker({position: pos, map: map, title: 'Your geolocation'});
map.fitBounds(circle.getBounds());