How to make Google map draggable and keep marker in the center of the screen?

Question

I have a button which enable/disable draggable option for the map.

And I need to keep the marker in the center of the map while user will drag the map.

var map;

function toggleMapDraggable() {
  if (map.get("draggable")) {
    map.set("draggable", false);
  } else {
    map.set("draggable", true);
  }
}

function initialize() {

  var locations = [
    ['WELWYN GARDEN CITY ', 51.805616, -0.192647, 2],
    ['STANMORE  ', 51.603199, -0.296803, 1]
  ];

  map = new google.maps.Map(document.getElementById('map_canvas'), {
    navigationControl: true,
    scrollwheel: false,
    scaleControl: false,
    draggable: false,
    zoom: 10,
    center: new google.maps.LatLng(51.75339, -0.210114),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var infowindow = new google.maps.InfoWindow();
  var image = 'http://maps.google.com/mapfiles/ms/micons/blue.png';

  var marker, i;


  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      icon: image,
      zIndex: 10
    });

    window.google.maps.event.addListener(map , 'drag', function (event) {
            marker.setPosition( map .getCenter() );
    });

    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
  }
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" value="toggle draggable" onclick="toggleMapDraggable();" />
<div id="map_canvas"></div>

Answer 1

For draggable you should use setOptions

map.setOptions({draggable: true});

and for marker in center

 marker.setPosition( map.getCenter(););