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

i have button enable/disable draggable option map.

and need keep marker in center of map while user drag 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&nbsp;', 51.805616, -0.192647, 2],      ['stanmore &nbsp;', 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;        (i = 0; < 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>

for draggable should use setoptions

map.setoptions({draggable: true}); 

and marker in center

 marker.setposition( map.getcenter(););